如何修复已包装文本的圆角边框

Question

我的应用程序中有一个表（动态生成）有3列。文本太长的单元格，它包裹好，除了圆形边框现在看起来很糟糕。

目前，我的表格包含在DIV中，其ID设置为 item-list ，CSS如下：

#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;
}

我的问题是，是否有一种方法可以使用CSS使包装的文本在所有边缘都被舍入？

[免责声明] 我的专长是PHP。 CSS是一项我非常了解的技能，通常可以完成我需要做的事情，但不仅仅是业余爱好者。

Answer 1

将display: block;添加到您的#item-list a。

#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元素