ラップされたテキストの丸みを帯びた罫線を修正する方法

Question

3つの列を持つ（動的に生成された）アプリケーションにテーブルがあります。テキストが長すぎるセルは、ラウンド境界を除いてうまくいきます。

#item-list { 
    text-align: center; 
} 


#item-list table { 
margin: auto auto; 
} 

#item-list td { 
padding: 10px; 
text-align: center; 
} 

#item-list a { 
font-size: 0.8em; 
color: #FFF; 
margin: 10px; 
border-radius: 8px; 
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
padding: 4px; 
padding-left: 10px; 
padding-right: 10px; 
background-color: #1a546a; 
text-decoration: none; 
font-weight: bold; 
} 

#item-list a:hover { 
background-color: #8f2525; 
} 

私の質問は、方法がある：現在、私のテーブルは項目リストとして設定されているIDとDIVに包まれて、次のようにCSSがある

CSSを使用してラップされたテキストをすべての端で丸めます。

[免責事項]私の専門はPHPです。 CSSは私が通常行うべきことを十分に知っているスキルですが、素人をはるかに超えたものではありません。

Answer 1

#item-list aにdisplay: block;を追加します。私はあなたのために簡単な例を設定した

#item-list a { 
    font-size: 0.8em; 
    color: #FFF; 
    display: block; 
    margin: 10px; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    padding: 4px; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: #1a546a; 
    text-decoration: none; 
    font-weight: bold; 
} 

- http://jsfiddle.net/spacebeers/g5YcT/

表示ブロック

要素が（段落や ヘッダのような）ブロック要素として表示されます。ブロック要素の上と下に空白があり、その隣のHTML要素は許容されません。