CSS div宽度问题

Question

i have div with 500px width which contains multiple anchors... problem anchors not wrapping in to multiple lines.... i tried using table as well same problem....

<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>

Answer 1

Try replacing   with just a space character.   prevents the browser from wrapping words it is attached to. Each <a> will not appear on a new line, but it will successfully wrap if it no longer fits its container if using normal spaces.

Answer 2

If there is no white-space between the anchors, it is considered all one string and therefore can not wrap. You could try to use the CSS rule word-wrap to help with this, but some browsers may not honor such a setting.

Simple solution is to change   to an actual spaces. Or use a <ul> and have the <li> display: inline; . The latter is arguably more semantic.

Answer 3

Use float:left;margin-right:5px

  is a naughty way to force spacing; you'll get much more consistent and professional results with good CSS (in this case, margin ).