выравнивание текста: выравнивание не работает - PullRequest
Новая
       26

выравнивание текста: выравнивание не работает

2 голосов
/ 19 декабря 2010

HTML 

<div id="menu">
    <a href="#">Commissions</a>
    <a href="#">Business Setup</a>
    <a href="#">Administrator</a>
    <a href="#">Content Management</a>
    <a href="#">Inventory</a>
    <a href="#">Communications Tools</a>
    <a href="#">Genealogy</a>
    <a href="#">Reports</a>
</div>

CSS 

#menu {
    width: 1000px;
    float: left;
    font-size: 9pt;
    text-align: justify;
}
#menu a {
    text-decoration: none;
    color: #0066cc;
    font-size: 9pt;
}
#menu a:hover {
    text-decoration: underline;
}

Я хочу, чтобы каждая ссылка имела ширину.Я попытался реализовать это с помощью text-align: justify.Но это не работает.Как я могу это сделать?

Ответы [ 3 ]

5 голосов
/ 06 августа 2013

Это создаст равномерно распределенные div-ы (могут быть ссылки или о любом элементе). Проблема, с которой вы столкнулись, заключается в том, что justify не работает ни с одной строкой текста (или с последней строкой текста). Вот почему вам нужен элемент: after psuedo.

Html: 

<div class="wrapper">
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
</div>

Css: 

.wrapper{
  text-align: justify;
}
.wrapper div{
  display: inline-block;
}
.wrapper:after{
  content: "";
  width: 100%;
  display: inline-block;
}
2 голосов
/ 19 декабря 2010

Я не уверен, что полностью понимаю ваш вопрос, но звуками вещей, которые вы хотите оправдать, чтобы сделать что-то, для чего он не предназначен.

Только тогда, когда строка текста переносится по правому краю контейнера, текст будет выравниваться.

Это, однако, не может произойти в вашем меню.

Так что вместо исправления обоснования (я говорю исправление, хотя ничего не сломано), у меня вместо этого есть другое предложение.

Насколько я понимаю, вы хотите, чтобы ваши ссылки равномерно распределялись по вашему разделу.

Лучший способ, который я могу придумать, - это задать ширину элемента в процентах на основе количества ссылок и выровнять по центру вместо выравнивания.

Например: 

#menu a {
    text-decoration: none;
    color: #0066cc;
    font-size: 9pt;
    width: 12%;
    display: inline-block;
    text-align: center;
}

Я не знаю, хотите ли вы этого, но вы можете попробовать и посмотреть, что вы думаете.

0 голосов
/ 19 декабря 2010

Нет.Все ссылки имеют разную длину.Но длина между этими ссылками должна быть одинаковой.

У меня есть только решение для таблиц.http://jsfiddle.net/Flack/Q7z6q/

Я знаю, что это грязно, и буду рад, если кто-то придет с лучшей идеей.

...