CODEWITHSUNDEEP
jqueryhtmlcss
nikita
nikita

Reputation: 277

Adjust menu after deleting last Li

I am creating one navigation in which I have 4 <li> but it's count is not fix it can be either 3 or 2 but I want it's spacing should get adjust and adjust the space between the <li> and occupy full <ul> width

Here is Demo

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Registr</a></li>
</ul>

https://jsfiddle.net/sb0crovd/

Suppose register get deleted from above example then remaining 3 <li> should get adjusted and occupy full width of <ul>

Please help me with this do I need JS plugin for the same ?

Thanks, Nikita

Upvotes: 2

Views: 53

Answers (1)

Paulie_D
Paulie_D

Reputation: 115045

A couple of layout options for you.

Display Table

ul {
    padding: 0 2%;
    width: 96%;
    height: 60px;
    margin:0;
    background:red;
}
li {
    list-style: none;
}
a {
    font-size: 15px;
    display: block;
    padding: 15px 0;
    text-decoration:none;
    color:#ffffff;
}
.table {
    display: table;
    table-layout: fixed;
    text-align: center;
}
.table li {
    display: table-cell;
}
<ul class="table">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
      <li><a href="#">Location</a>
    </li>
</ul>

<ul class="table">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
</ul>

Display Flex

ul {
  padding: 0 2%;
  width: 96%;
  height: 60px;
  margin: 0;
  background: red;
}
li {
  list-style: none;
}
a {
  font-size: 15px;
  display: block;
  padding: 15px 0;
  text-decoration: none;
  color: #ffffff;
}
.flex {
  display: flex;
}
.flex li {
  flex: 1;
  text-align: center;
}
<ul class="flex">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
  <li><a href="#">Location</a>
  </li>
</ul>

<ul class="flex">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

Upvotes: 2

Related Questions