CODEWITHSUNDEEP
htmlcss
user7255640
user7255640

Reputation:

How to justify all links in my div over the full width?

I have this index menu, and i'm trying to make all the links in the div have the same width, so they always fill the container.

The result should be: At start of div, we have A and at the end we have Z (or the last element in the div)

As you can see it doesn't stretch at the moment. Is there some way to do it? 

div{
width:100%;
  display: block;
  border: 1px solid #000;
  padding: 10px;
}

div a{
  display: inline-block;
}
<div>
  <a href="Index.aspx?index=A">A</a>
  <a href="Index.aspx?index=B">B</a>
  <a href="Index.aspx?index=C">C</a>
  <a href="Index.aspx?index=D">D</a>
  <a href="Index.aspx?index=E">E</a>
  <a href="Index.aspx?index=F">F</a>
  <a href="Index.aspx?index=G">G</a>
  <a href="Index.aspx?index=H">H</a>
  <a href="Index.aspx?index=I">I</a>
  <a href="Index.aspx?index=J">J</a>
  <a href="Index.aspx?index=K">K</a>
  <a href="Index.aspx?index=L">L</a>
  <a href="Index.aspx?index=M">M</a>
  <a href="Index.aspx?index=N">N</a>
  <a href="Index.aspx?index=O">O</a>
  <a href="Index.aspx?index=P">P</a>
  <a href="Index.aspx?index=Q">Q</a>
  <a href="Index.aspx?index=R">R</a>
  <a href="Index.aspx?index=S">S</a>
  <a href="Index.aspx?index=T">T</a>
  <a href="Index.aspx?index=U">U</a>
  <a href="Index.aspx?index=V">V</a>
  <a href="Index.aspx?index=W">W</a>
  <a href="Index.aspx?index=X">X</a>
  <a href="Index.aspx?index=Y">Y</a>
  <a href="Index.aspx?index=Z">Z</a>
</div>

Upvotes: 1

Views: 110

Answers (4)

derMatt
derMatt

Reputation: 205

If I understand you correctly, you want to make something like a Menu, which always adapts to the length of the div.

My idea is to set the width of the <a></a> elements with the formula: 100 devided by the number of elements.

But thats not the best way I think. 

div a{
  display: inline-block;
  text-align: center;
  width: 3.5%;
}

Maybe this could help you :U

Upvotes: 0

Teshtek
Teshtek

Reputation: 1352

I think in this situation is better to use flex, so it could be something like :

Same html file : 

<div>
  <a href="Index.aspx?index=A">A</a>
  <a href="Index.aspx?index=B">B</a>
  <a href="Index.aspx?index=C">C</a>
  <a href="Index.aspx?index=D">D</a>
  <a href="Index.aspx?index=E">E</a>
  <a href="Index.aspx?index=F">F</a>
  <a href="Index.aspx?index=G">G</a>
  <a href="Index.aspx?index=H">H</a>
  <a href="Index.aspx?index=I">I</a>
  <a href="Index.aspx?index=J">J</a>
  <a href="Index.aspx?index=K">K</a>
  <a href="Index.aspx?index=L">L</a>
  <a href="Index.aspx?index=M">M</a>
  <a href="Index.aspx?index=N">N</a>
  <a href="Index.aspx?index=O">O</a>
  <a href="Index.aspx?index=P">P</a>
  <a href="Index.aspx?index=Q">Q</a>
  <a href="Index.aspx?index=R">R</a>
  <a href="Index.aspx?index=S">S</a>
  <a href="Index.aspx?index=T">T</a>
  <a href="Index.aspx?index=U">U</a>
  <a href="Index.aspx?index=V">V</a>
  <a href="Index.aspx?index=W">W</a>
  <a href="Index.aspx?index=X">X</a>
  <a href="Index.aspx?index=Y">Y</a>
  <a href="Index.aspx?index=Z">Z</a>
</div>

But the css have to be :

div{
  width:100%;
  display:flex;
  border: 1px solid #000;
  padding: 10px;
}

div a{
  flex-grow:1;
  display: inline-block;
}

So flex-grow allow you to do this but 1 is the magic number, according to its definition :

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.

I hope it can helps you.

Upvotes: 1

Ron.Basco
Ron.Basco

Reputation: 2446

these rules will do:

display: flex;
justify-content: space-around;


div{
width:100%;
  border: 1px solid #000;
  padding: 10px;
  display: flex;
  justify-content: space-around;
}

div a{
  display: inline-block;
}
<div>
  <a href="Index.aspx?index=A">A</a>
  <a href="Index.aspx?index=B">B</a>
  <a href="Index.aspx?index=C">C</a>
  <a href="Index.aspx?index=D">D</a>
  <a href="Index.aspx?index=E">E</a>
  <a href="Index.aspx?index=F">F</a>
  <a href="Index.aspx?index=G">G</a>
  <a href="Index.aspx?index=H">H</a>
  <a href="Index.aspx?index=I">I</a>
  <a href="Index.aspx?index=J">J</a>
  <a href="Index.aspx?index=K">K</a>
  <a href="Index.aspx?index=L">L</a>
  <a href="Index.aspx?index=M">M</a>
  <a href="Index.aspx?index=N">N</a>
  <a href="Index.aspx?index=O">O</a>
  <a href="Index.aspx?index=P">P</a>
  <a href="Index.aspx?index=Q">Q</a>
  <a href="Index.aspx?index=R">R</a>
  <a href="Index.aspx?index=S">S</a>
  <a href="Index.aspx?index=T">T</a>
  <a href="Index.aspx?index=U">U</a>
  <a href="Index.aspx?index=V">V</a>
  <a href="Index.aspx?index=W">W</a>
  <a href="Index.aspx?index=X">X</a>
  <a href="Index.aspx?index=Y">Y</a>
  <a href="Index.aspx?index=Z">Z</a>
</div>

Upvotes: 2

roberrrt-s
roberrrt-s

Reputation: 8210

Use flexbox (display: flex) in combination with justify-content: space-between; on your div.

div{
  width: 100%;
  display: flex;
  border: 1px solid #000;
  padding: 10px;
  justify-content: space-between;
}

div a{
  display: inline-block;
}
<div>
  <a href="Index.aspx?index=A">A</a>
  <a href="Index.aspx?index=B">B</a>
  <a href="Index.aspx?index=C">C</a>
  <a href="Index.aspx?index=D">D</a>
  <a href="Index.aspx?index=E">E</a>
  <a href="Index.aspx?index=F">F</a>
  <a href="Index.aspx?index=G">G</a>
  <a href="Index.aspx?index=H">H</a>
  <a href="Index.aspx?index=I">I</a>
  <a href="Index.aspx?index=J">J</a>
  <a href="Index.aspx?index=K">K</a>
  <a href="Index.aspx?index=L">L</a>
  <a href="Index.aspx?index=M">M</a>
  <a href="Index.aspx?index=N">N</a>
  <a href="Index.aspx?index=O">O</a>
  <a href="Index.aspx?index=P">P</a>
  <a href="Index.aspx?index=Q">Q</a>
  <a href="Index.aspx?index=R">R</a>
  <a href="Index.aspx?index=S">S</a>
  <a href="Index.aspx?index=T">T</a>
  <a href="Index.aspx?index=U">U</a>
  <a href="Index.aspx?index=V">V</a>
  <a href="Index.aspx?index=W">W</a>
  <a href="Index.aspx?index=X">X</a>
  <a href="Index.aspx?index=Y">Y</a>
  <a href="Index.aspx?index=Z">Z</a>
</div>

Upvotes: 6

Related Questions