css - 如何从左到右放置 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 */
}

给你一个花哨的演示。

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

无论如何，这就是基础。一旦你准备好了，你就可以开始了！