2

I have this HTML code:

<div class="link-area">
     <a href="/" id="parts">Автозапчасти</a>
     <a href="/catalogs/oil_mp" id="oils">Масла/автожидкости</a>
     <div class="oil-dd"></div>
     <a href="/catalogs/accums_mp" id="accums">Аккумуляторы</a>
     <a href="/catalogs/wheel_fixture_mp" id="wheel_fixtures">Крепёж</a>
     <div class="wheel_fixture-dd">     
     </div>
     <a href="/catalogs/wheel_fixture_mp" id="parts_for_service">Запчасти для ТО</a>
 </div>

and it looks like this:

enter image description here

but I must change it so, that between blocks in link-area div the margin is set to auto so that all this blocks are situated on all width of link-area:

enter image description here

How can I do this? Please see my JS fiddle.

Scott
  • 21,211
  • 8
  • 65
  • 72
Valdis Azamaris
  • 1,433
  • 5
  • 22
  • 47

2 Answers2

5

Use text-align: justify; on the container element.

Then stretch the content to take up 100% width

FIDDLE

MARKUP

<div class="link-area">
     <a href="/" id="parts">Автозапчасти</a>
     <a href="/catalogs/oil_mp" id="oils">Масла/автожидкости</a>

     <a href="/catalogs/accums_mp" id="accums">Аккумуляторы</a>
     <a href="/catalogs/wheel_fixture_mp" id="wheel_fixtures">Крепёж</a>

     <a href="/catalogs/wheel_fixture_mp" id="parts_for_service">Запчасти для ТО</a>
 </div>

CSS

div {
    text-align: justify;
}

div > a {
    display: inline-block;
    background: pink;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

For further reference, check out this post (which is also where I learnt this method from)

and also my answer here which uses the css calc() function to achieve this effect.

Community
  • 1
  • 1
Danield
  • 121,619
  • 37
  • 226
  • 255
  • In the future, questions that already have an answer on SO should be closed as duplicates, not have their solution copied to the duplicate. – cimmanon Jul 29 '13 at 15:58
1

if number of orange boxes isn't variable just use margin like this:

First Solution:

.box{
    margin:0 15px 0 15px;
}
.box:first-child{
    margin:0 30px 0 0;
}
.box:last-child{
    margin:0 0 0 30px;
}

replace proper value instead of 15px and 30px

Second Solution:

.box{
    float:none !important;
    margin:0 auto;
}
.box:first-child{
    float:left;
    margin:0;
}
.box:last-child{
    float:right;
    margin:0;
}
Mohammad Masoudian
  • 3,483
  • 7
  • 27
  • 45