文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >背景色不能填满整个里。

问背景色不能填满整个里。
EN

Stack Overflow用户
提问于 2017-01-09 19:15:55
回答 4查看 2K关注 0票数 0

我做了一个菜单，想要添加一个背景颜色到其中一个菜单项。在我添加了背景颜色之后，左边有一个小空间，没有被颜色覆盖。有人知道我怎么能填满整个空间吗？

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

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

background-color
css
list
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-01-09 19:19:42

内联元素与列表项一样，对代码中的空白很敏感，所以要么删除空格，要么将显示设置为内联块，将列表项浮动。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

或

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2017-01-09 19:22:30

您需要为.slider li-s定义.slider li-s。它将消除多余的差距：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2017-01-09 19:49:04

它与HTML代码中的空白有关，当元素被显示在内联块中时就会显示出来。

有几种方法可以摆脱它(你可能也想读https://css-tricks.com/fighting-the-space-between-inline-block-elements/ )

  • 注释代码中的空白

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

  • 使代码中的李括号相互接触。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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上将其重置为正常

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

编辑

其他一些浮动或显示的方式

  • 使用显示:父服务器上的flex

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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:表和伪表来填充行尾

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41555276

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档