在菜单栏中的按钮之间添加分隔符 (HTML/CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15476727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a separator between buttons in a menu bar (HTML/CSS)
提问by Anton Fernando
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
我正在制作一个移动网站，但在对菜单栏进行一些更改时遇到了一些困难。我不是该领域的专家，因此非常感谢您的帮助。
Below is the codes to the menu bar.
下面是菜单栏的代码。
CSS
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
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>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
这是一个基本的菜单栏，我想将其调整到中心，并且还有水平线将每个按钮分开，同时所有这些都居中并在移动屏幕上 100% 适合。非常感谢您的所有帮助
EDIT: Its like having some space after each button but instead theres a horizontal line
编辑：就像在每个按钮后都有一些空间，但有一条水平线
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
编辑：将宽度从 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; }
采纳答案by Mr_Green
I added below lines in your css code. I hope this is what you want.
我在您的 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
}
回答by Amyth
from your current css remove float:left;on li's and add text-align:center;and it should work:
从您当前的 css 中删除float:left;onli并添加text-align:center;它应该可以工作：
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
这是一个有效的JSFiddle。
Update
更新
In that case you can change the CSS to.
在这种情况下，您可以将 CSS 更改为。
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle
这是一个有效的JSFiddle
回答by Rohit Azad
Now just removefloat:leftin your liand adddisplay:inline-block;and addtext-align centerin your ultag
现在只需删除float:left您的li并添加display:inline-block;并添加text-align center您的ul标签
as like this
像这样
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
