.container
{
position: absolute;
bottom: 0px;
height: 25px;
left: 200px;
padding-right: 5px;
background-color: black;
overflow: hidden;
}
.child
{
position: relative;
float: left;
height: 100%;开发者_如何转开发
width: 95px;
background-color: #99CCFF;
margin-left: 5px;
}
I when the size of the browser window is smaller than will allow for all the children to fit without wrapping I would like there to be a scrollbar, not the default mechanism of the child elements wrapping.
I'm not in control of the number of child elements so I can not set a width on the container. How can I prevent the wrapping of the child elements?
If you don't want wrapping, you should not use floats - they were created specifically for wrapping.
Use a parent container with overflow:auto
and white-space:nowrap
and children with display:inline
or inline-block
.
This is not really possible with simple HTML and CSS. Without knowing the number of child elements, the only way would be to dynamically set a min-width using JavaScript, based on the number of child elements and their total width.
You can add a parent holder () of all childes. And then use the overflow:auto of that div. If that doesn't work then also use self.innerHeight and self.innerWidth (via javascript) for the div height and width.
精彩评论