CODEWITHSUNDEEP
csslistbackground-color
user6738171
user6738171

Reputation: 1007

Background color does not fill entire li

I made a menu and want to add a background color to one of the menu items. After I added the background color there was a small space on the left that wasn't covered by the color. Does anyone know how I can fill the entire space?

Here is a fiddle: 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>

Upvotes: 0

Views: 2232

Answers (4)

Shihab
Shihab

Reputation: 197

Please migrate the class from "a" to "li". Because you want to put your background to li. And add the following css. Its working now.

 <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>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105943

It is about the white-space from your HTML code that shows up when element are displayed inline-block.

There a few ways to get rid of it ( you may also want to read https://css-tricks.com/fighting-the-space-between-inline-block-elements/ )

  • comment that white space in the code

.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>

  • make li brackets touch each others in the code

.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>

  • reset font-size on parent to 0 and back to normal on li in the code

.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>

edit

Some other ways float or display

  • use 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>

  • use display:table and a pseudo to fill the end of the line

.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>

  • or the very classic 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>

Upvotes: 0

Banzay
Banzay

Reputation: 9470

You need to define float: left; for .slider li-s. It will remove redundant gaps:

.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;
}
<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>

Upvotes: 0

j08691
j08691

Reputation: 207900

Inline elements, like you list items, are sensitive to white space in your code, so either remove the space or instead of setting the display to inline-block, float the list items left.

.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>

Or

.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>

Upvotes: 2

Related Questions