HTML CSS UL 菜单样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15431046/
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
HTML CSS UL menu styling
提问by Harry
Small question on how to achieve some styling on a HTML / CSS UL menu.
关于如何在 HTML/CSS UL 菜单上实现一些样式的小问题。
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
我有一个标准的 UL 菜单，但是在如何实现某种样式的外观方面遇到了一些问题。目前的 UL 菜单如下所示：
(HTML)
(HTML)
<ul id="nav">
<li><a href="#">CONTACT US</a>
</li>
<li><a href="#">HOME</a>
</li>
</ul>
(CSS)
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
我希望菜单按钮有一个 1px 的小边框，但是在背景颜色开始之前有一些大约 3px 的空白填充。
Similar to how this looks:
类似于它的外观：
Can this be done using the UL menu method?
这可以使用 UL 菜单方法完成吗？
Thanks for any advice, I'm no expert with HTML / CSS.
感谢您的任何建议，我不是 HTML/CSS 专家。
回答by Sowmya
回答by Pete
you can use the following styles to achieve what you want:
您可以使用以下样式来实现您想要的：
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
回答by xoxo_tw
ok
好的
in html go
在 html 中
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
在 CSS 中
dl { display: flex;
flex-direction: column;}
some hints...
一些提示...
dt float left AND dd float right
dt 向左浮动和 dd 向右浮动
