如何从左到右放置DIV？

Question

是否可以设置DIV样式，使它们如下所示：

使用简单的代码

<div class='menubar'><div class='menu'>item1<br/>item2</div>...</div>

这是菜单。我希望只调整选定的DIV。

功能应如下：

1） DIV从左到右放置而不指定绝对位置。

2） DIV比容器DIV高但不伸展它

更新

请用DIV或SPAN解释，我没有使用LEFT。我需要学习，而不是准备好解决方案。

Answer 1

这是非常基本的东西。

1）不要使用div，使用列表 2）浮动子元素

<ul class='menubar'>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

和相应的css：

ul.menubar{
   /*some fancy css*/
   height:<x>px; /* is needed since it would collapse otherwise*/
}
ul.menubar > li{
   float:left;
   /* more fancy css */
}

您可以使用 fancy demo 。

Answer 2

为div设置宽度，然后使用float:left;？ 这不会拉伸容器

您也可以使用display:inline-block;（在div上）并将text-align:center;设置为容器。 但它会拉伸容器。

Answer 3

这取决于您希望它用于哪种浏览器。对于ie8及以下，我建议不要使用此代码。收件箱我，如果您更喜欢所有浏览器版本，但忽略5.5,6,7和8最好。

首先，对于菜单，我发现使用无序列表方法比选择div及其ID和类更容易。这是一个小例子。

HTML列表

<ul id="menu">
    <li>
        <a href="#">list1</a>
    </li>
    <li>
       <a href="#">List2</a>
       <ul>
           <li>
               <a href="#">Option2</a>
           </li>
       </ul>
</ul>

菜单的CSS：

body, html {
    padding:0px;
    margin:0px;
    width:100%;
}
body{
    background:#FCFCFC;
}
#menu{
    background:#333333;
    list-style-type:none;
    padding:0px;
    margin:0px;
}
#menu > li {
    padding:0px;
    margin:0px;
    display:inline-block;
}
#menu > li > a {
    color:#FFFFFF;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
}
#menu > li > ul {
    display:hidden;
    position:absolute;
}
#menu > li:hover > ul{
    display:block;
}

无论如何都是基础知识。一旦你准备好了，你就可以了！;