使用列表,我想创建一个链接列表,如图所示
<div id="toolbarbottom" class="toolbar" style="position: fixed; clear: both; overflow: visible; bottom: 0px; left: 0px; width: 100%;">
<ul>
<li id="active"><span><a id="current" href="#add" class="button">News</a></span></li>
<li><span> <a href="#Updates" class="button">Updates</a></span> </li>
<li><span><a href="#Contact" class="button">Contact Us</a></span></li>
<li><span><a href="#Website" class="button">Website</a> </span></li>
<li><span><a href="#Refresh" id="#Refresh" class="button">Refresh</a></span> </li>
</ul>
</div>
我有点卡在 CSS(按钮)和列表元素之间的间距上。使列表以这种形式出现。有人知道我该如何解决这个问题吗?
最佳答案
或者另一种方法是使用 float ,并使 ul
display: inline-block
包含 float 的 li
的
您需要稍微更改 HTML,以便 span
在 a
里面- 这样您就可以隐藏跨越文本,但保留 a
的图像背景和可点击区域元素,我还会给每个链接一个唯一的引用(类或 ID),以便可以单独应用背景。
示例 HTML:
<div id="toolbarbottom" class="toolbar" style="position: fixed; top: 0px; left: 0px; width: 100%;">
<ul>
<li class="active"><a href="#add" id="madd"><span>News</span></a></li>
<li><a href="#Updates" id="mupdates"><span> Updates</span></a></li>
<li><a href="#Contact" id="mcontact"><span>Contact Us</span></a></li>
<li><a href="#Website" id="mwebsite"><span>Website </span></a></li>
<li><a href="#Refresh" id="mrefresh"><span>Refresh</span></a> </li>
</ul>
</div>
然后您可以将整个背景放在 ul 上,并将单独的图像放在每个链接上。
#toolbarbottom ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
width: 100%;
background: #ff0;
}
#toolbarbottom li {
float: left;
width: 80px;
height: 80px;
border: 1px solid #000; /* not required, just to show where individual links are */
}
#toolbarbottom li a { /* make link fill the li element */
display: block;
height: 80px;
}
#toolbarbottom li span { /* hide the text */
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip: rect (1px 1px 1px 1px);
}
/* couple examples of where to put individual backgrounds */
#toolbarbottom #mupdates {background: #dad;}
#toolbarbottom #mcontact {background: #0f0;}
关于html - 样式列表按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6585344/