html - 在一行内显示 <div> 标签

Question

我有一个 <table>我放了 6 个以上 <div>合二为一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;
}

这是设计 View :

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

您还可以将 ul 包裹在一个 nav 中，这是一个 HTML5 元素，为它提供一个含义，是的，这是一个导航，您可能会嵌套 a 元素在 holder 中，所以使用 display: block; 为 a 元素是有意义的