CSS div寬度問題

Question

我有500px寬度的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>

Answer 1

嘗試更換  只是一個空格字符。   防止瀏覽器包裝其附加的單詞。 每個<a>不會出現在新行上，但是如果使用常規空格，如果它不再適合其容器，它將成功包裝。

Answer 2

如果錨點之間沒有空格，則將其視為所有一個字符串，因此無法換行。 您可以嘗試使用CSS規則word-wrap來解決此問題，但是某些瀏覽器可能不支持這種設置。

簡單的解決方案是更改  到一個實際的空間。 或使用<ul>並display: inline; <li> display: inline; 。 后者可以說是更具語義的。

Answer 3

使用float:left;margin-right:5px

  是強制間隔的頑皮方法； 良好的CSS（在這種情況下為margin ），您將獲得更加一致和專業的結果。