Как сделать меня в строку html

HTML форум > Создание сайтов > CSS > Как сделать ссылки в одну строчку

PDA

Просмотр полной версии : Как сделать ссылки в одну строчку

Страницы : [1] 2

Neptun

07.03.2012, 13:44

Из названия вообще не понятно, что я хочу спросить...
В общем суть проблемы такова:
под шапкой находится горизонтальный бокс, на всю ширину, в который помещаются кнопки. От идеи рисовать кнопки я отказался, решил реализоваться с помощью текста и hover. наверное пол дня промучался, что бы расположить весь текст горизонтально, сам не понял, как это у меня получилось. А теперь мне надо что бы между ссылками был отступ. Вот тут хочется послушать ваших советов. небольшие отрывки из кода:
.menu{text-align:center; width:100%; margin-top:-25px; padding-left:20px; padding-right:20px;}
.menu a{ color:white; text-decoration:none;}
.menu a:hover{background:#006DB2;color:white;
}
<div class="menu">
<a href="#">ГЛАВНАЯ</a>
<a href="#">ВИЗИТКА</a>
</div>
...
еще раз повторюсь, что отображаются эти две ссылки слитно. а надо бы сделать небольшой отступ

Zippovich

07.03.2012, 13:54

.menu a {display: inline-block; padding: 0 20px}

Azazaza

07.03.2012, 15:43

а лучше.menu a {display:block; padding: 0 20px; float:left}

Zippovich

07.03.2012, 15:52

а лучше.menu a {display:block; padding: 0 20px; float:left}
display: block и float: left взаимозаменяющие свойства. float: left выставляет display в inline-block - по-этому display: block не имеет смысла. И в вашем случае теряется выравнивание по центру.

napilnik

07.03.2012, 18:27

добавляя ссылкам паддинг, вы их увеличивате (то есть расстояние между ними будет тоже кликабельным). лучше использовать margin

napilnik

07.03.2012, 18:30

float: left выставляет display в inline-block
вообще-то в display:block

Zippovich

07.03.2012, 18:36

добавляя ссылкам паддинг, вы их увеличивате (то есть расстояние между ними будет тоже кликабельным). лучше использовать margin
не факт, что лучше
вообще-то в display:block
в чем отличие между block и inline-block? с float-ом блок ведет себя как inline-block, а не как block.

napilnik

07.03.2012, 18:40

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

Zippovich

07.03.2012, 18:41

я про это и пишу - от ситуации зависит

napilnik

07.03.2012, 18:43

в чем отличие между block и inline-block? с float-ом блок ведет себя как inline-block, а не как block.
вам ссылки на спецификацию что-ли дать? не путайте остальных, разница большая. и флот не ведет себя как инлайн-блок http://www.w3.org/TR/CSS2/visuren.html#floats

napilnik

07.03.2012, 18:43

от ситуации зависит
я написала конкретно к его ситуации

Zippovich

07.03.2012, 18:55

Различие по-моему только в том что float в инлайн не становится, т.е. если inline-block замечает к примеру пробелы вокруг, то float не замечает, а другого различия не вижу. Хотя да - в спецификации написано block.

napilnik

07.03.2012, 19:12

это абсолютно разные вещи.. флот вырывается из основного потока, инлайн-блок нет. флот-блок остальные блоки игнорируют, инлайн-блок нет. и так далее.. в конце концов, флотный блок обтекается, инлайн-блок нет http://jsfiddle.net/TE2uV/

Bugnet

07.03.2012, 20:44

Если хотите чтобы между ссылками были "отступы"
А теперь мне надо что бы между ссылками был отступ. Вставьте "отступы" - необходимое количество символов пробела.

Azazaza

07.03.2012, 20:45

inline-block не кроссбраузерно

Zippovich

07.03.2012, 20:48

inline-block не кроссбраузерно
В ie7 работает - или Вы имеете ввиду IE6 - там тоже просто все лечится

Zippovich

07.03.2012, 20:53

Если хотите чтобы между ссылками были "отступы" Вставьте "отступы" - необходимое количество символов пробела.
Это не верстка. Да и пробел прийдется вставлять неразрывный. Обычные пробелы сократятся до одного. Изменять расстояние можно только пробелами, но не единицами измерения. Ширина пробела различна в разных шрифтах и пр. пр. недостатки.

Bugnet

07.03.2012, 21:27

Автор темы что-то молчит. На счёт пробелов согласен. Как вариант можно и пустую картинку spacer.gif (http://narod.ru/disk/41373463001.54b88fff756ff1db7dc1119f13105cbb/spacer.gif.html) вставить между ссылками необходимой width="".

napilnik

07.03.2012, 21:31

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

Bugnet

08.03.2012, 15:09

Поплачь. Я просто попытался помочь человеку, который по его же словам:
Я сам CSS не очень хорошо владею, точнее вообще не сталкивался.. Он хочет как сделать меня в строку html реальной помощи, а не Ваших рассуждений о том, что
флотный блок обтекается, инлайн-блок нет +"а Волга впадает в Каспийское море". Здесь спрашивают люди с самым разным уровнем знаний и отвечая им нужно это учитывать. Худший совет такому человеку - это Ваш совет. Я исходил из того, что картинку то он вставить всё же сможет. А Ваши советы - пшик. Отослали бы просто его изучать CSS- было бы больше толку. Не хочу заедаться - это так утомляет на форумах, но смотрите немного шире и учитывайте кому даёте совет. Вы может и дельные советы даёте, но абсолютно нереальные к реализации данным товарищем.
P.S. Пригладь иголки napilnik

napilnik

08.03.2012, 16:40

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

Bugnet

08.03.2012, 17:12

больше плакать хочется
не поняла, с чего это мне плакать вдруг?
Ну если хочется....
С праздником Вас и давайте не будем больше писать в этой теме

DelphinPRO

08.03.2012, 18:13

inline-block не кроссбраузерно
а чем докажете? :)
....
ладно, не парьтесь с доказательствами :) - вот вам лекарство кроссбраузерное:
.class {
display:inline-block;
display:inline;
zoom:1;
}
ну или по-хорошему - в отдельный файл через conndition comments

Neptun

08.03.2012, 19:42

Спасибо большое мне любой вариант подходит, не важно по центру или сбоку. главное что бы был отступ.

Neptun

11.03.2012, 04:29

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

Powered by vBulletin™ Version 4.1.3 Copyright © 2017 vBulletin Solutions, Inc. All rights reserved. Перевод: zCarot


Источник: http://www.html.by/archive/index.php/t-24031.html



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как разместить элементы списка горизонтально в одну строку - HTML, CSS Отвар коры дуба для дёсен

Как сделать меня в строку html Как сделать меня в строку html Как сделать меня в строку html Как сделать меня в строку html Как сделать меня в строку html Как сделать меня в строку html

Похожие новости