Question

我需要将这些div并排放在一个菜单栏中，但到目前为止它一直堆叠在一起。我已经尝试过margin-right / left / top / bottom，padding等...但是无法让它工作，有什么建议吗？

<div id="Menu" >
     <div id="M_1"><a id="M_1_L" href="P4.html">Given</a></div>
     <div id="M_4"><a id="M_4_L" href="P2.html">Received</a></div>
     <div id="M_3"><a id="M_3_L" href="P3.html">Bucket List</a></div>
     <div id="M_2"><a id="M_2_L" href="P1.html">Traditions</a></div>
</div>

CSS是：

#Menu
{
    width: 50%; height: 40px; background-color: blue; margin-left: auto; 
    margin-right: auto; margin-top: 20px; border-radius: 20px;
}

#M_1
{
    text-align: center; width: 20%; background-color: black;
}

#M_2
{
    text-align: center; width: 20%; background-color: black;
}

#M_3
{
    text-align: center; width: 20%; background-color: black;
}

#M_4
{
    text-align: center; width: 20%; background-color: black;
}

Answer 1

为每一个添加这两个

 #M_1
 {
  display: inline-block;
  float: left;
}

如果不适合全部，请尝试将1或2或全部更改为19％宽度

Answer 2

您需要float: left他们或将他们设置为display: inline-block。

Answer 3

您可以通过合并选择器来整理CSS。

#menu{
    display:table;width: 50%; height: 40px; background-color: blue;
    margin:20px auto; border-radius: 20px;
}
#menu > div{
    text-align: center; background-color: black;display:table-cell
}

Answer 4

最好的办法是：

    <ul>
    <li><a href="p4.html">given</a></li><li>
    <a href="p3.html">received</a></li>
    </ul>

Ul {
   Width:50%;
   Height:40px;
   Background: blue;
   Margin: 0 auto;
   }

Ul li {
    Display:inline-block;
    Width:20%;
    Background:#000;
    Text-align: center;
    }

将结束标记和开放标记彼此相邻会阻止内联块在元素之间留下间隙。

4个并排的分区（菜单栏）

4 个答案: