2

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

下面是菜单栏的代码。

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

3 回答 3

2

我在您的 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
}

工作小提琴

于 2013-03-18T12:39:42.830 回答
0

从您当前的 css 中删除float:left;' lis 并添加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

于 2013-03-18T12:24:21.173 回答
0

现在只需删除 float:left您的li并添加 display:inline-block;并添加 text-align center您的ul标签

像这样

ul{
text-align:center;
}

ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}

演示

于 2013-03-18T12:32:35.540 回答