CSS显示:当width设置为100%时,表行不会展开。 [英] CSS display:table-row does not expand when width is set to 100%
问题描述
我有一个问题。我使用FireFox 3.6并具有以下DOM结构:
I'm having a bit of a problem. I'm using FireFox 3.6 and have the following DOM structure:
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
和以下CSS:
.view-row {
width:100%;
display:table-row;
}
.view-name {
display: table-cell;
float:right;
}
.view-type {
display: table-cell;
}
如果我取消了 display:table-row
它会正确显示, view-row
显示宽度为100%。如果我把它放回来,它缩小。我把它放在JS Bin:
If I take off the display:table-row
it will appear correctly, with the view-row
showing a width of 100%. If I put it back it shrinks down. I've put this up on JS Bin:
发生了什么事?
推荐答案
如果您使用 display:table-row
等,那么您需要正确的标记,其中包括一个包含表。没有它,你的原始问题基本上提供了相同的坏标记:
If you're using display:table-row
etc., then you need proper markup, which includes a containing table. Without it your original question basically provides the equivalent bad markup of:
<tr style="width:100%">
<td>Type</td>
<td style="float:right">Name</td>
</tr>
上面的表格在哪里?你不能只是有一排没有地方(tr必须包含在表
, thead
, tbody
等)
Where's the table in the above? You can't just have a row out of nowhere (tr must be contained in either table
, thead
, tbody
, etc.)
而是添加一个外部元素 display:table
,将100%宽度放在包含元素上。两个内部单元格将自动转到50/50,并在第二个单元格上对齐文本。用表元素删除 float
。
Instead, add an outer element with display:table
, put the 100% width on the containing element. The two inside cells will automatically go 50/50 and align the text right on the second cell. Forget floats
with table elements. It'll cause so many headaches.
标记:
<div class="view-table">
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
</div>
CSS:
.view-table
{
display:table;
width:100%;
}
.view-row,
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.view-name
{
text-align:right;
}
这篇关于CSS显示:当width设置为100%时,表行不会展开。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!