Question

我试图找到一种方法来添加某种填充/边距到一个自动包装的元素，因为（所需）最大宽度为300px。元素在TD内部，遗憾的是我无法改变。这是从许多不同成员站点的数据库中提取内容的菜单的一部分。这是一个基于模板的系统。

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

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

我尝试过为第二行使用伪类元素，但由于实际代码中没有换行符，因此无效。我还尝试了其他一些我发现的'黑客'，比如盒子阴影属性，但似乎无法得到我想要的结果。我想在“第一行”右侧有大约10px填充，在“第二行”左侧有10px填充。任何建议将不胜感激 - 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

为什么不将css定义用于TD元素？然后你会有没有问题的填充，我认为当它是一个换行符时，它应该不会显示为2个不同的按钮

Answer 2

添加到linkclass linkloc定义inline-block：

.linkloc {
  display: inline-block;
}

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

以下代码我正在使用：

2 个答案: