注意

Question

我想在4个单元格中的DLE上显示5个评级元素。这就是我现在所拥有的：

<table width=100%>
<tr>    
   <td width=10%>
   <div class="custom-data"> Score IMDB</div>
   </td>
   <td>
        <div class="custom-data">Score Users</div>
        <div class="custom-data">Stars</div>
   </td>  
</tr>

<tr>
   <td>IMDB</td>
   <td>Users</td>
</tr>

</table>

这看起来应该是

Score IMDB | Score Users *****
   IMDB    |   Users

我在第一列中定义了宽度。我想在中间设置一个边框来分隔分数，但我不能用表格来做对吗？

ul li标签搞砸了星星。我唯一的办法就是div。

你能帮我编写这个结构的代码吗？

Answer 1

这个怎么样：

<强> HTML

<div class="left">Score IMDB</div><div class="right">Score Users *****</div>
<div style="clear:both;"></div>
<div class="left">IMDB</div><div class="right">Users</div>

<强> CSS

.left, .right { display:inline-block; margin:5px 0; }
.left { border-right:1px solid #000; width:90px; padding:4px; }
.right { padding:4px 4px 4px 10px; }

这里的'魔术'真的在于display:inline-block，它允许我们将div放在一起。希望这有帮助！

DEMO.

注意

由于您希望右侧第二列具有动态宽度，因此在右侧列中将不会显示居中文本的效果（就像您在所需内容中所描述的那样）。如果您仍然希望左列显示效果，请将此代码添加到 .left ：

text-align:center;

用div创建一个不同尺寸的表格

1 个答案:

注意