[英]HTML CSS UL menu styling
關於如何在HTML / CSS UL菜單上實現某些樣式的小問題。
我有一個標准的UL菜單,但有一些問題讓我了解如何實現樣式的某種外觀。 目前的UL菜單如下所示:
(HTML)
<ul id="nav">
<li><a href="#">CONTACT US</a>
</li>
<li><a href="#">HOME</a>
</li>
</ul>
(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;
}
我希望菜單按鈕有一個小的1px邊框,但是在背景顏色開始之前會有一些大約3px的空白填充。
與此類似:
可以使用UL菜單方法完成嗎?
感謝您的任何建議,我不是HTML / CSS的專家。
添加margin
到a
標簽和移動邊框li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
您可以使用以下樣式來實現您的目標:
#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*/
}
好
在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>
在css
dl { display: flex;
flex-direction: column;}
一些提示......
dt向左浮動並且dd向右浮動
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.