Question

我正在尝试创建一个带有列表items.i的菜单栏为列表items应用css。我希望所有这些都位于一行上我的意思是当放大到500％并缩小到25％时所有列表项应该在同一行。但在我的实现中他们走出了界限。我是初学者请帮帮我

的CSS：

     .menu
     {
       margin-top:5px;
       margin-bottom:5px;
       background-color:#4c4c4c;
       color:white;
       position:relative;
       display:inline-block;
       text-align:center;
       padding:0px 85px 0px 85px;
       border:2px solid #4c4c4c;
      }
      #menuitem1
      {
   border-top-left-radius:5px;
   border-bottom-left-radius:5px; 
   text-align:center;
   margin:auto;
      }
      #menuitem4
      {
   border-top-right-radius:5px;
   border-bottom-right-radius:5px;  
      }

<html>
<body >
 <div id="page">
   <div id="bar">
    <ul>
      <li class="menu" id="menuitem1" >Home</li>
      <li class="menu">contact us</li>
      <li class="menu">pay</li>
      <li class="menu" id="menuitem4" >plans</li>
     </ul>
   </div>
 </div> 
</body>
</html>

jsfiddle

Answer 1

以百分比形式设置.menu的宽度，以便li响应。

JSFIddle

<强> HTML

<body >
    <div id="page">
            <div id="bar">
            <ul>
                <li class="menu" id="menuitem1" >
                    Home
                </li>
                <li class="menu">
                    contact us
                </li>
                <li class="menu">
                    pay
                </li>
                <li class="menu" id="menuitem4" >
                    plans
                </li>
            </ul>
        </div>

    </div>



</body>

<强> CSS

.menu
{
 margin-top:5px;
 margin-bottom:5px;
 background-color:#4c4c4c;
 color:white;
 position:relative;
 display:inline-block;
 text-align:center;
 padding:0px 0px 0px 0px;
 border:2px solid #4c4c4c;
    width:20%;
}
#menuitem1
{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px; 
    text-align:center;
    margin:auto;
}
#menuitem4
{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px; 

}

Answer 2

您可以添加：

ul {
    white-space: nowrap;
}

防止包裹 - ＆gt; jsfiddle

Answer 3

您可以尝试使用百分比宽度值来表示li元素的宽度。

.some-class {
    width: 25%
}

我在jsfiddle上做了一些更改，只是为了表明这种实现是可行的。

如果您担心移动设备。看看带有设备宽度的元标记。

将列表项对齐在一条直线上

3 个答案: