背景颜色不会填满整个li

时间：2017-01-09 19:15:55

标签： css list background-color

我制作了一个菜单，想要为其中一个菜单项添加背景颜色。添加背景颜色后，左侧有一个小空间，没有被颜色覆盖。有谁知道如何填满整个空间？

这是一个小提琴：https://jsfiddle.net/9crtzv6s/1/ 

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

4 个答案:

答案 0 :(得分：2)

内联元素（如列出项目）对代码中的空格敏感，因此要么删除空格，要么将显示设置为内联块，浮动列表项。

＆＃13;
＆＃13; 
.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  float: left;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
＆＃13; 
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

或者

＆＃13;
＆＃13; 
.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
＆＃13; 
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li><li><a href="#" class="slider-2">Menu</a>
    </li><li><a href="#" class="slider-3">Menu</a>
    </li><li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您需要为float: left; - s定义.slider li。它将消除多余的空白：

＆＃13;
＆＃13; 
.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  float: left;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
＆＃13; 
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

它是关于HTML代码中的空格，当元素显示为内联块时显示。

有几种方法可以摆脱它（您可能还想阅读https://css-tricks.com/fighting-the-space-between-inline-block-elements/）

  • 注释代码中的空格

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li><!--
    --><li><a href="#" class="slider-2">Menu</a>
    </li><!--
    --><li><a href="#" class="slider-3">Menu</a>
    </li><!--
    --><li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

  • 让李括号在代码中互相接触

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li><li>
    <a href="#" class="slider-2">Menu</a>
    </li><li>
    <a href="#" class="slider-3">Menu</a>
    </li><li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

  • 将font-size的父级重置为0，并在代码中li恢复正常

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
  font-size:0
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

修改

其他一些浮动或显示方式

  • 使用display：flex on parent 

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
  display:flex;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: inline-block;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

  • 使用display：table和一个伪来填充行尾

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
  display:table;
}
.slider ul:after {
  content:'';
  display:table-cell;
  width:100%;
  }
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {
  display: table-cell;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

  • 或非常经典的float 

.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider li {float:left;
  border-right: 1px solid black;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider-3 {
  background-color: green;
}
<div class="slider">
  <ul>
    <li><a href="#" class="slider-1">Menu</a>
    </li>
    <li><a href="#" class="slider-2">Menu</a>
    </li>
    <li><a href="#" class="slider-3">Menu</a>
    </li>
    <li><a href="#" class="slider-4">Menu</a>
    </li>
  </ul>
</div>

答案 3 :(得分：0)

请从＆＃34; a＆＃34;迁移班级。到＆＃34; li＆＃34;。因为你想把你的背景放到李。并添加以下css。它现在正在工作。

 <div class="slider">
  <ul>
    <li class="slider-1"><a href="#">Menu</a>
    </li>
    <li class="slider-2"><a href="#">Menu</a>
    </li>
    <li class="slider-3"><a href="#">Menu</a>
    </li>
    <li class="slider-4"><a href="#">Menu</a>
    </li>
  </ul>
</div>

<style>
.slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  width: 480px;
  margin: 0 auto;
}
.slider li a {

  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.slider-1
.slider-2
.slider-3
.slider-4{
border-right: 1px solid black;
}

.slider li {
  display: inline-block;

  text-transform: uppercase;
  font-size: 13px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.slider li:last-child {
  border-right: none;
}
.slider ul .slider-3 {
  background-color: green;
}
</style>
相关问题
最新问题