Question

我正在尝试使用css创建邮件收件箱。收件箱包括2个范围，用于收件人，一个用于主题。我使用隐藏溢出来隐藏任何字符，如果收件人名称超过跨度的宽度。问题发生在收件人字符增加时，它将主题跨度推得更远。我想让主题跨度框保持在它的位置。怎么办呢？

感谢您帮助我

enter image description here

HTML

  <link rel="stylesheet" href="css/float.css">



 <div class="box15">

 <span class="username"> Hello HelloHelloHello</span>
 <span class="description">Hello</span><input type="checkbox" name="" value="" class="id_check">
 <p>
 <span class="username">Hello</span>
 <span class="description">Hello</span><input type="checkbox" name="" value="" class="id_check">
 <p>
 <span class="username">Hello</span>
 <span class="description">Hello</span><input type="checkbox" name="" value="" class="id_check">
 <p>
 </div>

CSS

.box15 {background-color: #71ECA0;height:480px;width: 500px;position: absolute;left: 450px;top: 230px; }
.username {background-color: #7EBA00;height:23px;width: 130px;position: relative;left: 10px;top: 10px;font-size:21px;font-family:Garamond;color: #090E13;overflow:hidden;}
.description {background-color: #7EBA00;height:23px;width: 290px;position: relative;left: 150px;top: 9px;font-size:21px;font-family:Garamond;color: #090E13;overflow:hidden;}
.id_check {background-color: #F6E49C;position: relative;left: 370px;top: 7px;}

Answer 1

这看起来像一个简单的表实际上更有意义的情况 - 我倾向于将电子邮件收件箱视为表格数据。添加<colgroup>元素，以便您可以在一个位置定义列宽：

<table class="inbox">
    <colgroup>
        <col />
        <col class="sender" />
        <col class="subject" />
    </colgroup>
    <thead>
        <tr>
            <th>
                <input type="checkbox" />
            </th>
            <th>
                Sender
            </th>
            <th>
                Subject
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>
                foo@bar.tld
            </td>
            <td>
                You won some moneys!
            </td>
        </tr>
    </tbody>
</table>

一些简单的CSS规则使它看起来更好一些：

table.inbox
{
    border: solid 1px #f5f5f5;
    padding:5px;
    width: 100%;
}

.sender
{
    width: 15em;
    text-align: left;
}

th
{
    text-align: left;
    background: #f2f2f2;
    padding: 5px;
}

.subject
{
    min-width: 20em;
}

td
{
    padding: 5px;
}

演示：http://jsfiddle.net/pXkyB/

使用表的一个优点是，还有相当多的JavaScript插件使排序行和重新排列列变得微不足道; jqGrid是第一个浮现在脑海中的人。

Answer 2

使用div而不是spans。 Span是内联元素。没有宽度或高度影响跨度的大小。你错误地使用了p元素。也是在关闭之前/之前＆gt;在输入标签中。另外，我建议您使用相对宽度值而不是精确值。 http://jsfiddle.net/QaQAv/6/

<div class="box15">

 <div class="username"> Hello HelloHelloHello</div>
 <div class="description">Hello</div>
 <div class="checkMe"><input type="checkbox" name="" value="" /></div>
 <div class="clear"></div>
 <div class="username">Hello</div>
 <div class="description">Hello</div>
 <div class="checkMe"><input type="checkbox" name="" value="" /></div>
 <div class="clear"></div>
 <div class="username">Hello</div>
 <div class="description">Hello</div>
 <div class="checkMe"><input type="checkbox" name="" value="" /></div>
 <div class="clear"></div>
 </div>

CSS收件箱问题

2 个答案: