Question

我正在制作一个移动网站，并且对我的菜单栏进行一些更改时遇到了一些困难。我不是这个领域的专家，所以非常感谢你的帮助。

以下是菜单栏的代码。

CSS

<style type="text/css">
    * { padding: 0; margin: 3; }
    body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
    ul { list-style: none; }
    ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
    ul a:hover {background-color:#5A87B4; }

HTML

<div> 
<ul>
<li>
  <div align="center"><a href="../Software.html" >Software</a>
    </div>
</li>
  <li>
    <div align="center"><a href="../Products.html">Products</a></div>
  </li>
<li>
<a href="../Order Online.html">FAQ</a></li>
</ul>

这是一个基本的菜单栏，我想调整到中心，并且还有水平线将每个按钮分开，而所有这些都居中并且在移动屏幕上适合100％。非常感谢您的所有帮助

编辑：就像在每个按钮后面有一些空格，而是一条水平线

编辑：将宽度从75％更改为80px。请注意，我还更改了我的代码的div ID，因为我在识别方面遇到了一些其他问题。 :)希望这不会让你感到困惑

#menubar * { padding: 0; margin: 2; }
    body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}

#menubar ul{text-align:center;}

#menubar ul li { display:inline-block; padding: 2px;  position: relative;  }

#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }

Answer 1

我在你的css代码中添加了以下行。我希望这就是你想要的。

ul{
   display:inline-block;
   overflow:hidden;
}

div{
  text-align:center;
}

li:after{
   border-right:50px solid black;
   content:"";
   position:relative;
   left:10px;
   top:-27px;  
   z-index:-1;
   display:block;
   height:1px;
}

li:last-child{
   margin-right:-14px
}

Working Fiddle

Answer 2

从您当前的css移除float:left;上的li并添加text-align:center;，它应该有效：

ul li {
    text-align: center;
    padding: 1.5px;
    position: relative;
    margin: auto;
}

这是一个有效的JSFiddle。

更新

在这种情况下，您可以将CSS更改为。

ul li{
    text-align:center;
    display:inline-block;
}

ul li:before {
    content: " - ";
}

ul li:first-child:before {
    content: none;
}

这是一个有效的JSFiddle

Answer 3

现在只需删除 float:left，然后添加 li和添加 {{ 1}}在 ul 标记

中

就像这样

display:inline-block;

<强> Demo

在菜单栏中的按钮之间添加分隔符（HTML / CSS）

3 个答案:

更新