在一行中显示<div>标签</div>

Question

我有一个<table>，我在一个<div>中添加了超过6个td，然后我更改了display:inline以将这些<div>放在一起。

但它只在第一行显示最多5 <div> s，并在第一行下方的另一行显示其他人！

哪里错了？

这是我的代码：

   <tr>
     <td>
        <div id="navigation"> Home </div>
        <div id="navigation"> Item1</div>
        <div id="navigation">  Item2 </div>
        <div id="navigation">  Item3</div>
        <div id="navigation"> Item4  </div>
        <div id="navigation">  Item5 </div>
        <div id="navigation"> Item 6 </div>
        <div id="navigation">   Item 7</div>
     </td >
   </tr>

CSS代码：

#navigation{
    display:inline;
    padding:0px 10px 0px 10px;
}

这是设计观点：

Answer 1

你正在使用table进行布局，而不是使用div，ya，当然它不会给你带来任何错误，但你在做什么在语义上是不正确的......

正确的方法和更好的方法是使用display: inline-block; CSS属性作为无序列表

<ul>
   <li>Demo 1</li>
   <li>Demo 2</li>
   <li>Demo 3</li>
   <li>Demo 4</li>
   <li>Demo 5</li>
</ul>

ul li {
   display: inline-block;
}

你也可以将ul包装在一个HTML5元素的nav里面，为它提供一个含义，这是一个导航，你可能会将a元素嵌套在里面持有人如此使用display: block; a元素将有意义

Answer 2

首先，您不能拥有多个具有相同ID的元素。在元素上将id="navigation"更改为class="navigation"。

其次，您可以使用此CSS：

.navigation
{
    display: inline-block;
}

这将使这些元素全部出现在一行中。

Answer 3

因为没有固定的表格宽度，所以表格的最大宽度是窗口宽度。

看到这个小提琴： http://jsfiddle.net/7QLPW/1/

一个指定宽度的表和一个没有

的表

<table width="500px">
...

<table>

第一个不会在窗口宽度变得太小时立即中断，第二个则不会。

Answer 4

您的桌子的宽度，完整布局或您拥有的列数。

您可以看到我为您的问题尝试的内容

http://fiddle.jshell.net/yNF4n/