如何为在 TD 内自动换行的元素添加填充

Question

我正在尝试找到一种方法来为由于（需要）最大宽度为 300 像素而自动换行的元素添加某种填充/边距。该元素位于 TD 内，不幸的是我无法更改。这是从数据库中为许多不同成员站点提取内容的菜单的一部分。这是一个基于模板的系统。

受影响的区域是位置列表。在以下示例站点中，标题为“示例沙龙和水疗中心 - 位于非常长的位置”的位置是问题区域。它在选择位置下的右侧：

This is What The Menu Looks Like

http://www.mysalonorspaname.com/services.asp

我已经尝试在第二行使用伪类元素，但由于实际代码中没有换行符，所以它不起作用。我还尝试了一些我发现的其他“黑客”，例如 box-shadow 属性，但似乎无法得到我想要的结果。我想在“第一行”的右侧有大约 10 像素的填充，在“第二行”的左侧有 10 像素的填充。任何建议将不胜感激 - 首选 css 或 jquery 解决方案！非常感谢！

这是我正在使用的代码：

<div id="mainContent">
<div id="newAside">
<div class="asideLocationList">
<table cellpadding='3' cellspacing='0' border='0' width='100%'>
<tr>
<td class='LocListHeader'>Choose a Location</td>
</tr>
<tr>
<td class='LocListAltRow1'>
<a class='linkloc' href='?LID=12197'>Example Salon & Spa</a></td>
</tr>
<tr>
<td class='LocListAltRow2'>
<a class='linkloc' href='?LID=13567'>Example Salon & Spa - At A Really Long Location</a></td>
</tr>
</table>
</div>
</div>

这是 CSS：

html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr, iframe {
margin: 0;
padding: 0;
border: 0;
vertical-align:baseline;
font: inherit;
}

body 
{
top:0;
width: 100%;
font-family: "rucksack-1","rucksack-2",sans-serif;
line-height: 1.5;
color: #bebebe;
font-weight:normal;
font-style:normal;  
min-width:1080px

}
td, tr, table
{
color: #bebebe;   
}
#mainbox
{
width:100%;
background-color: rgba(0,0,0, 0.9);
display:inline-block;
margin:0;


}

#mainContent

{
width:95%;
max-width:100%;
margin:30px auto;
vertical-align: baseline;

}
#newAside {
display:list-item;
float:right;
margin:0 20px 30px 0;
padding: 10px;
vertical-align: baseline;
-webkit-box-shadow: 0px 0px 10px 0px  #3a3a3a;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow:    0px 0px 10px 0px #3a3a3a;  /* Firefox 3.5 - 3.6 */
box-shadow:         0px 0px 10px 0px #3a3a3a;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.servCatList, .asideLocationList ul, .asideLocationList
{
display:block;
margin-top:10px;
margin-bottom:15px;
list-style: none;
max-width:300px;

}
.servCatList a, .asideLocationList a
{

background-color:rgba(0,0,0, 0.6); 
line-height:2.5em;
border:1px solid #424242;
padding:8px;
}
.servCatList a:hover, .asideLocationList a:hover
{

background-color: #424242;
color:#858470;
padding:8px;
margin-top:5px;
margin-bottom:5px;
}

.LocListAltRow2, .LocListAltRow1
{
font-size:1em;
display:block;
font-weight:normal;
border: none;
background-color:transparent; 
line-height:2.5em;
border:none;

}

Answer 1

将定义内联块添加到您的链接类linkloc：

.linkloc {
  display: inline-block;
}

Answer 2

为什么不对 TD 元素使用 css 定义？那么您将毫无问题地使用填充，我认为当它是换行符时，它无论如何都不应该显示为 2 个不同的按钮