html - 如何修复环绕文本的圆 Angular 边框

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/

显示 block

The element is displayed as a block element (like paragraphs and headers). A block element has some whitespace above and below it and does not tolerate any HTML elements next to it