问题描述
|
我在一个表格单元格中有一个list(),其中的元素包含一个标签(\“数据描述符\”)和一个包含数据的跨度。请参阅下面的PHP代码:
...
echo \'<li><label>Trade Name</label><span>\' . $row[\'TradE_NAME\'] . \'</span></li>\';
echo \'<li><label>Company</label><span>\' . $row[\'COMPANY\'] . \'</span></li>\';
echo \'<li><label>Synonyms</label><span>\' . $row[\'ALL_SYNONYMS\'] . \'</span></li>\';
...
现在的问题是,如果跨度中的文本太长,它将“溢出到下一行”,并直接显示在标签下方:
Trade Name XYZ
Company ABC
Synonyms xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx
我希望它看起来像这样:
Trade Name XYZ
Company ABC
Synonyms xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx
问题在于此列表在表格单元格中。据我所知,divs不能在表格单元格中显示吗?是清单?
我该如何解决以上问题?
编辑:
如果值为emtpy / null,则使用dl会导致以下问题:
Trade Name XYZ
Company Synonyms xxxx
-> 2 dt elemtns显示在同一行上。
解决方法
在我看来,这种布局就像一张桌子,所以我要用一张桌子:
<table>
<tbody>
<tr>
<td>Trade</td>
<td>Name XYZ</td>
</tr>
<tr>
<td>Company</td>
<td>ABC</td>
</tr>
<tr>
<td>Synonyms</td>
<td>xxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxx</td>
</tr>
</tbody>
</table>
但是,如果您不想使用表并且不介意手动调整大小,则可以使用定义列表进行操作:
<dl>
<dt>Trade</dt><dd>Name XYZ</dd>
<dt>Company</dt><dd>ABC</dd>
<dt>Synonyms</dt><dd>xxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxx</dd>
</dl>
然后是一些CSS:
dt {
float: left;
width: 100px;
}
dd {
margin-left: 100px;
}
以及这两种方法的示例:http://jsfiddle.net/ambiguous/RftDM/
,一定是李的吗?为什么不在表中创建其他表单元级别?许多表都细分了单元格。 (在您的代码中,将li替换为tr并将标签和span替换为td \'s,然后将其包裹在ѭ7中。)
作为辅助解决方案,我将删除li \'s和label并使用两个范围,第一个是class = \“ floatleft \”,第二个是class = \“ floatright \”。然后只需使用td span.floatleft {display:block; float:left;}(和其他span相似)为这些类设置样式。您可能必须至少为左侧的宽度设置宽度,我认为它不需要高度。
, <div class=\"container\">
<div class=\"spacer\">
</div>
<div class=\"float\">
<img src=\"image1.gif\" width=\"100\" height=\"100\"
alt=\"image 1\" /><br />
<p>caption 1</p>
</div>
<div class=\"float\">
<img src=\"image2.gif\" width=\"100\" height=\"100\"
alt=\"image 2\" /><br />
<p>caption 2</p>
</div>
<div class=\"float\">
<img src=\"image3.gif\" width=\"100\" height=\"100\"
alt=\"image 3\" /><br />
<p>caption 3</p>
</div>
<div class=\"spacer\">
</div>
</div>
div.spacer {
clear: both;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
Another one
div.float {
float: left;
}
div.float p {
text-align: center;
}
And the HTML:
<div class=\"float\">
<img src=\"image1.gif\" width=\"100\" height=\"100\"
alt=\"image 1\" /><br />
<p>caption 1</p>
</div>
<div class=\"float\">
<img src=\"image2.gif\" width=\"100\" height=\"100\"
alt=\"image 2\" /><br />
<p>caption 2</p>
</div>
<div class=\"float\">
<img src=\"image3.gif\" width=\"100\" height=\"100\"
alt=\"image 3\" /><br />
<p>caption 3</p>
</div>