3

<span>タグを使用する場合、css インライン/ブロックに問題があります。ここに画像の説明を入力

ここに画像の説明を入力

画像からわかるように、3 番目のメッセージにカーソルを合わせると、削除/返信コントロールがポップアップ表示されますが、コンテンツが押し下げられることは望ましくありません。どうすればこれを達成できますか?

これは私のcssコードです：

ul.inbox {
    width: 100%;
    list-style-type: none;
}

.unread {
    border: 1px solid #999 !important;
    background: #eee url("new.png") no-repeat !important;
    background-position: left center !important;
}

li span.hidden {
    clear: both;
    visibility: hidden;
}

li span.messageControls {
    clear: both;
    float: right;
    display: inline;
}

li span.messageControls a {
    padding: 5px 5px 0 0;
    font-size: 12px;
    color: #06c;
}

li.message {
    background: #eee;
    border: 1px solid #ddd;
    list-style-type: none;
    display: block;
    margin: 0 0 10px;
    padding-left: 30px;
    background-position: left center;
}

li.message:hover {

}

li.message a {
    text-decoration: none;
}

li {
    overflow: hidden;
}

li span.from {
    margin: 5px 0 5px 5px;
    font-family:"Open Sans",sans-serif;
    font-size: 14px;
    color: #666;
    float: left;
    font-weight: 700;
}

li span.date {
    margin: 5px 5px 5px 0;
    font-size: 12px;
    float: right;
    color: #06c;
}

li p.subject {
    margin: 5px 0 5px 5px;
    font-size: 14px;
    color: #666;
    clear: both;
    font-weight: 700;
}

li p.preview {
    margin: 5px 0 5px 5px;
    font-size: 12px;
    color: #999;
}

そして私の「受信トレイ」コード：

<ul class="inbox">
    <li id="1001843" class="message " onmouseout="document.getElementById('1001843MC').className='hidden'" onmouseover="document.getElementById('1001843MC').className='messageControls'" onclick="ajaxMessage(1001843);">
        <span class="from">Michael‌·Norris</span> <span class="date">Yesterday‌·21:18</span> <span id="1001843MC" class="hidden"><a href="compose.php?id=&to=">Reply</a> &nbsp; <a href="update.php?id=&action">Delete</a></span>

        <p class="subject">gjhgjhg</p>

        <p class="preview">jhgjhgjhg</p>
    </li>

    <li id="1001842" class="message " onmouseout="document.getElementById('1001842MC').className='hidden'" onmouseover="document.getElementById('1001842MC').className='messageControls'" onclick="ajaxMessage(1001842);">
        <span class="from">Michael‌·Norris</span> <span class="date">Yesterday‌·21:18</span> <span id="1001842MC" class="hidden"><a href="compose.php?id=&to=">Reply</a> &nbsp; <a href="update.php?id=&action">Delete</a></span>

        <p class="subject">gfhjgjfdhsgf</p>

        <p class="preview">gj‌·hg</p>
    </li>

    <li id="1001841" class="message " onmouseout="document.getElementById('1001841MC').className='hidden'" onmouseover="document.getElementById('1001841MC').className='messageControls'" onclick="ajaxMessage(1001841);">
        <span class="from">Michael‌·Norris</span> <span class="date">Yesterday‌·20:17</span> <span id="1001841MC" class="hidden"><a href="compose.php?id=&to=">Reply</a> &nbsp; <a href="update.php?id=&action">Delete</a></span>

        <p class="subject">gjhgjhg</p>

        <p class="preview">jhgjhgjhg</p>
    </li>
</ul>

ここでフィドル: http://jsfiddle.net/Er73L/

4

4 に答える 4

3

やみくもclearに使用するのではなく、必要な動作を実現するためにプロパティを正しく設定する必要があります。clear: both

CSS に 2 つの変更を加えました。

li span.messageControls {
    clear: right; /* was clear: both; */
    float: right;
    display: block; /* was display: inline */
}

li p.subject {
    margin: 5px 0 5px 5px;
    font-size: 14px;
    color: #666;
    clear: left; /* was clear: both; */
    font-weight: 700;
}

これが実際の例です。また、ドキュメントを読むことをお勧めします。

于 2013-01-18T00:43:28.830 に答える
1

簡単な修正です。次のようclear:leftに代わりに使用してください。clear:both

li p.subject {
    margin: 5px 0 5px 5px;
    font-size: 14px;
    color: #666;
    clear:left;
    font-weight: 700;
}

フィドル

于 2013-01-18T00:46:48.433 に答える
1

これを修正する方法は次のとおりです。http://jsfiddle.net/Er73L/1/

元の CSS との差分は次のとおりです: http://www.diffchecker.com/3tKbEnCe

li span.messageControls {
    position: absolute;
    right: 0;
    top: 1em;
}

li.message {
    background: #eee;
    border: 1px solid #ddd;
    list-style-type: none;
    display: block;
    margin: 0 0 10px;
    padding-left: 30px;
    background-position: left center;
    position: relative;  // NEW LINE
}
于 2013-01-18T00:43:32.610 に答える
0

別のオプションは、スパン要素を絶対に配置することです。この行をcssの一番下に追加し、必要に応じて微調整してください...

.messageControls{width:100px;border:1px solid red;position:absolute;right:0;margin-top:20px;}

http://jsfiddle.net/nYCsx/1/

于 2013-01-18T00:53:01.673 に答える