[英]HTML CSS UL menu styling
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. 我有一个标准的UL菜单,但有一些问题让我了解如何实现样式的某种外观。 The UL menu as it currently stands is shown here:
目前的UL菜单如下所示:
http://jsfiddle.net/WMQqt/ http://jsfiddle.net/WMQqt/
(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: 与此类似:
http://jsfiddle.net/6PY7z/ http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method? 可以使用UL菜单方法完成吗?
Thanks for any advice, I'm no expert with HTML / CSS. 感谢您的任何建议,我不是HTML / CSS的专家。
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*/
}
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向右浮动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.