如何从左到右放置DIV？

Question

是否可以为DIV设置样式，使其看起来如下所示：

用简单的代码

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

这是菜单。 我只想调整所选DIV的大小。

功能应如下：

1） DIV从左到右放置，没有指定绝对位置。

2） DIV比容器DIV高，但不要拉伸

UPDATE

请与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 */
}

在这里，您可以进行精美的演示 。

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;
}

多数民众赞成在基础。 一旦有了准备就可以开始了！