2010-11-03 6 views
1

я Div с 500px шириной, которая содержит множество якорей ... проблема анкеров не упаковочную в несколько строк .... я попытался с помощью таблицы, а такая же проблема ....Css ширина DIV проблема

<div style="width:500px;"> 
    <a href="#procrit">procrit</a>&nbsp; 
    <a href="#doxil">doxil</a>&nbsp; 
    <a href="#prezista">prezista</a>&nbsp; 
    <a href="#simponi">simponi</a>&nbsp; 
    <a href="#reopro">reopro</a>&nbsp; 
    <a href="#topamax">topamax</a>&nbsp; 
    <a href="#invega">invega</a>&nbsp; 
    <a href="#axert">axert</a>&nbsp; 
    <a href="#aciphex">aciphex</a>&nbsp; 
    <a href="#concerta">concerta</a>&nbsp; 
    <a href="#risperdal">risperdal</a>&nbsp; 
    <a href="#remicade">remicade</a>&nbsp; 
    <a href="#velcade">velcade</a>&nbsp; 
    <a href="#doxil">doxil</a>&nbsp; 
    <a href="#regranex">regranex</a>&nbsp; 
    <a href="#nucynta">nucynta</a>&nbsp; 
    <a href="#duragesic">duragesic</a>&nbsp; 
    <a href="#leustatin">leustatin</a>&nbsp; 
    <a href="#invega">invega</a>&nbsp; 
    <a href="#sustenna">sustenna</a>&nbsp; 
    <a href="#reminyl">reminyl</a>&nbsp; 
    <a href="#natrecor">natrecor</a>&nbsp; 
</div> 
+0

Вам необходимо отформатировать HTML как код, отложив его четырьмя пробелами. Затем вы сможете использовать теги ''. Также добавьте новые строки. – SLaks

+0

Мне не нужен каждый якорь в новой строке ... после превышения указанной ширины он должен появиться в следующей строке ... – Rajesh

+1

Вы должны добавить новые строки в свой код, чтобы люди могли его прочитать. – SLaks

ответ

1

Если между якорями нет пробелов, это считается всей одной строкой и, следовательно, не может быть завершено. Вы можете попытаться использовать правило CSS word-wrap, чтобы помочь в этом, но некоторые браузеры могут не соблюдать такую ​​настройку.

Простым решением является изменение &nbsp; в фактических местах. Или используйте <ul> и получите <li>display: inline;. Последнее, возможно, более семантическое.

+0

. Вот почему я добавил   – Rajesh

+2

' ' является * неразрывным пространством * и поэтому все еще не сломается. –

6

Попробуйте заменить &nbsp; с помощью пробега. &nbsp; запрещает браузеру обертывать слова, к которым он прикреплен. Каждый <a> не будет отображаться в новой строке, но он будет успешно завершен, если он больше не подходит для своего контейнера при использовании обычных пробелов.

0

Применение float:left;margin-right:5px

&nbsp; является непослушным способ заставить интервал; вы получите гораздо более последовательные и профессиональные результаты с хорошим CSS (в данном случае margin).

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