CSS inline-block не работает?

Вы не можете себе представить, как это разочарование, чтобы просто создать простые коды и они не работают :( я хочу этот код сделать навигационный гориз и установить ширину каждый, чтобы отделить между нимиCSS inline-block не работает?

HTML.:

<ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">What</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Support</a></li> 
    </ul>

CSS:.

body{margin:0;} ul{list-style-type:none;margin:0;padding:0;display:block;} 
li{float:left;} a{width:60;}

источник

2013-07-24 CanYouSmell

Что вы хотите сделать? Если вы хотите, чтобы все они были на одной линии, это случается. –

Да, это помогло бы, если бы мы знали, что вы хотите делать;) – SharkofMirkwood

Ожидаемое и фактическое поведение, пожалуйста? Прямо сейчас мы абсолютно не знаем, что вы спрашиваете. – MathSquared

Я думаю, вы могли бы хотеть ваши ссылки на все будет 60px широкий Если это так, то изменение:

a{width:60;}

To:

a { width: 60px; display: inline-block;}

«60» само по себе не является признанным измерения для ширины CSS, и вам нужно встроенный блок, чтобы остановить его от всего обращаются как строка текста.

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

li { margin-right: 40px; }

источник

2013-07-24 01:45:04 SharkofMirkwood

это тоже не сработало :(все на вертикальной линии и, конечно, нет ширины – CanYouSmell

Это прекрасно работает для меня: http://jsfiddle.net/HsDRy/ – SharkofMirkwood

, но как насчет целой области нецелесообразно ??? – CanYouSmell

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

пример: литий {поплавок: левый; дисплей: встроенный;}

источник

2013-07-24 01:46:28

Это сработало для меня :), но :(значение «block» не работает, t получить всю область ссылки можно щелкнуть – CanYouSmell

Не уверен, что вы хотите сделать здесь на самом деле ... Я согласен с SharkofMirkwood я полагаю. Использование:

a { width: 60px; display: inline-block; margin: 0 10px;}

Добавление некоторого запаса поможет устранить их. Кроме того, используйте :last-of-type, чтобы предотвратить перехват последнего элемента списка элементов. Проверьте Mozilla Developer Network. Это может помочь вам понять, как все это работает.

источник

2013-07-24 02:25:35 cpk

CSS inline-block не работает?

ответ

Смежные вопросы