Question

我正在为网站创建菜单。对于每个项目（主页，联系我们，关于我们）我使用背景颜色和大小为125X30的文本。在CSS中，当我使用float时，它的工作正确。但是当我移除浮动时，所有单独的物品，如家，接触等一个接一个地下来。我需要它在一条线上从左到右没有浮动。帮帮我

Answer 1

如果浮点运行，我建议坚持下去 - 之后你可能只需要一个清算元素，因为这是一个常见的问题来源。

如果你真的不能使用花车，你可以使用display: inline-block

Answer 2

您的项目可能位于块级元素内（例如：div，li，p）。

简而言之：块元素，位于最后一个元素之下。内联，紧挨着最后一个。

您需要将商品设为内联商品。只需使用内联替换块级别标记（例如：span），或使用display: inline或display: inline-block设置样式。

Answer 3

Rajasekar，

CSSplay的Stu Nicholls有以下水平菜单而不使用浮点数：

<强> CSS

.menu {display:inline-block;}
.menu {display:inline;}
.holder {display:table;}

.menu {
  display:table-row;
  padding:0;
  margin:0;
  list-style-type:none;
  white-space:nowrap; 
  }
.menu li {display:inline;}
.menu a, .menu a:visited {
  display:block;
  float:left;
  padding:4px 16px;
  color:#000; 
  background:#d4d4d4; 
  border:1px solid #fff; 
  text-decoration:none;
  }
.menu a:hover {
  color:#fff; 
  background:#08c;
  }

#wrapper1 {text-align:left;}
#wrapper1 .holder {margin:0;

<强> HTML

<div id="wrapper1">
<div class="holder">
<ul class="menu">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>

</ul>
</div>
</div>

进一步说明（包括使用display：inline-block）is on CSSplay。

Answer 4

你有一些可能性，但我认为浮动是最好的方式。

您可以将div设置为显示：inline-block（但我不建议这样做）
- 你也可以做绝对定位，但这也不是一个简洁的解决方案。

如何防止CSS中Div的换行？

4 个答案: