Javascript-форум - меню, слова притянуты к краям

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - меню, слова притянуты к краям (https://javascript.ru/forum/xhtml-html-css/23326-menyu-slova-prityanuty-k-krayam.html)

Цитата:

Сообщение от Артем125

подскажите, пожалуйста, есть меню

<div>
ссылка 1 ссылка 2 ссылка 3
</div>

необходимо чтобы сслыка 1 была притянута к левом краю, сслка 2 к правому, а что заключено между ними, переменное число ссылок было равномерно по середине

не это нужно

<div style="text-align:justify;">
    <a href=#>левая</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>правая</a>
    <span style="display:inline-block;width:100%">&nbsp;</span>
</div>

Цитата:

Сообщение от Pavel M.

display:inline-block

;

Это не во всех версиях браузеров работает... :(
http://htmlbook.ru/css/display

Но + однозначно. :yes:

Спасибо, это как раз то,что нужно

не могли бы Вы растолковать, что здесь делает span

вот выдержка из мануала, непонятно

inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

Цитата:

Сообщение от Артем125

что здесь делает span

А ты убери его и увидишь... ;)

<div style="text-align:justify;">
    <a href=#>левая</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>правая</a>
</div>

Теоретически может помочь

<div style="text-align:justify; text-align-last: justify;">
    <a href=#>левая</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>правая</a>
</div>

http://htmlbook.ru/css/text-align-last

Но браузеры такого пока не понимают... :(

Цитата:

Сообщение от ksa

А ты убери его и увидишь...

Для это псевдо элементы есть, а для отстойных браузеров в условных комментариях спан засунуть.

Цитата:

Сообщение от Seva1986

Для это псевдо элементы есть

Таки покажи свой вариант... С "псевдо элементами". Кстати что это такое? :)

Цитата:

Сообщение от ksa

Таки покажи свой вариант... С "псевдо элементами". Кстати что это такое?

Ну ты лишний спан добавляешь по тому что text-align:justify; чтоб нормлаьно работал, последний элемент должен переноситься на другую строку поэтому ты и ставишь <span style="display:inline-block;width:100%"> </span>

в css 3, как ты уже говорил, для этого ввели специальное свойство text-align-last: justify;"

но поддержка пока плачевна для ie 8 например...

Вместо этого спана можно сделать так например...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
.div{
text-align:justify;
font-size:0; 
}
.div>*{
font-size:12px; 
}
.div:after{
content:"";
display:inline-block;
width:100%;
}
</style>
</head>
<body>

<div class="div">
    <a href=#>левая</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>правая</a>
</div>





</body> 
</html>

ну псевдо элемент это элемент созданый сss его нет в исходном html. http://specs.operafan.net/css2.1RU/CSS21/generate.html

ksa,

а зачем это делаеться так, через justify , какая задача?

Цитата:

Сообщение от Артем125

который обтекается другими элементами веб-страницы подобно встроенному элементу.

что это за перевод или мануал такой? скаких пор инлайн блоки, картинки в часности, стали флоатами, с каких пор их другие эелменты обтекают?