我是 CSS 新手。我正在设计一个标签栏菜单。我正在使用无序列表 <ul>对于选项卡。我为该选项卡写了一个 css。我需要在每个选项卡之间添加所需的空间。
我的代码是:
#tab-menu li a {
text-decoration: none;
color: #ffffff;
}
.button {
background: #FEFEFE;
background: rgba(254, 254, 254, 1);
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
#tab-menu ul li {
list-style: none;
position: relative;
float: left;
width: 90px;
height: 90px;
text-align: center;
line-height: 50px;
/* Here I need to add equal spaces between each tab. */
border-width: 1px 1px 0 1px;
background: #D9DADA;
background: rgba(217, 218, 218, 1);
border-radius: 7px 7px 7px 0px;
-moz-border-radius: 7px 7px 7px 0px;
-webkit-border-radius: 7px 7px 7px 0px;
}<body bgcolor="#bfbfbf">
<div id="tab-menu">
<ul>
<li>
<a href="#">
<img src="01.svg" />
</a>
</li>
<li>
<a href="#">
<img src="01.svg" />
</a>
</li>
<li>
<a href="#">
<img src="01.svg" />/a></li>
<li>
<a href="#">
<img src="01.svg" />
</a>
</li>
<li>
<a href="#">
<img src="01.svg" />
</a>
</li>
<li>
<a href="#">
<img src="01.svg" />
</a>
</li>
<li>
<a href="#">
<img src="01.svg" />
</a>
</li>
<li>
<a href="#">
<img src="01.svg" />
</a>
</li>
</ul>
</div>
<input type="submit" class="button" value="Add ticket" />
</body>有人可以帮我写代码吗？
最佳答案
使用这个 CSS
#tab-menu li a {
text-decoration: none;
color: #ffffff;
}
.button {
background: #FEFEFE;
background: rgba(254, 254, 254, 1);
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
#tab-menu ul li {
list-style: none;
position: relative;
float: left;
width: 90px;
height: 90px;
text-align: center;
line-height: 50px;
margin-right: 15px;//this adds space
border-width: 1px 1px 0 1px;
background: #D9DADA;
background: rgba(217, 218, 218, 1);
border-radius: 7px 7px 7px 0px;
-moz-border-radius: 7px 7px 7px 0px;
-webkit-border-radius: 7px 7px 7px 0px;
}
关于html - 如何使用边距设置标签栏之间的空格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31453960/