html - 节目一行里面的标签

Question

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

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

哪里错了？

这是我的代码：

   <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，是的，它肯定不会给您带来任何错误，但是您所做的在语义上是不正确的......

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

您还可以将 HTML5 元素的ul内部包装起来，nav以提供一个含义，是的，这是一个导航，您可能会将a元素嵌套在支架内，因此使用display: block;fora元素将是有意义的

Answer 2

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

其次，您可以使用以下 CSS：

.navigation
{
    display: inline-block;
}

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

Answer 3

What is the width of your table, full layout or how many column you have.

you can see what I try for your issue

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

Answer 4

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

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

一张指定宽度的表格，一张没有指定宽度的表格

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

<table>

一旦窗口宽度变得太小，第一个不会中断，第二个会中断。