Question

这是我的标记，我需要在蓝色标签下对齐灰色标签并保持数字与蓝色标签对齐。

CSS：

body
{
    font-family: arial, helvetica, sans-Serif;
}


#talkbacks .noshow
{
    clear: both;
    display: table; /*padding-left: 14px;*/
    line-height: 13px;
    width: 439px;
}


#talkbacks ul.top
{
    border: solid 1px #fff;
    margin: 0 -1px;
}

#talkbacks li
{
    width: 100%;
    margin-top: 11px;
}
#talkbacks ul
{

    clear: both;
}



.n
{
    color: #758888;
    float: left;
    font-size: 12px;
    padding-right: 8px;
    line-height: 15px;

}


.c
{
    /*float: left;*/
    width: 400px;
}

.d
{
    font-weight: bold;
    color: #758888;
    font-size: 12px;
    line-height: 15px;
    margin: 0;
    padding: 0;
}


ul
{
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding-left:0px;
    margin-left:0px;
}
a
{
    font-size: 12px;
    line-height: 15px;
    font-weight: bold;

}

a:link, a:visited
{
    color: #284D99;
    text-decoration: none;
    outline: none;
}
a:hover, a:active
{
    text-decoration: underline;
}

标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <ul>
        <li>
            <div class="noshow">
                <div class="n">
                    <span id="ctl03_ctl00_ctl00_lblCommentNum">12.</span>
                </div>
                <div class="c">
                    <a href="javascript:__doPostBack('ctl03$ctl00$ctl00$LinkButton1','')" id="ctl03_ctl00_ctl00_LinkButton1"
                        onclick="viewHide(this);return false;">title3</a>
                    <p class="d">
                        marc,03/09/2009 12:23:40</p>
                </div>
            </div>
        </li>
    </ul>
    <ul>
        <li>
            <div class="noshow">
                <div class="n">
                    <span id="ctl03_ctl01_ctl00_lblCommentNum">12.</span>
                </div>
                <div class="c">
                    <a href="javascript:__doPostBack('ctl03$ctl01$ctl00$LinkButton1','')" id="ctl03_ctl01_ctl00_LinkButton1"
                        onclick="viewHide(this);return false;">blabla</a>
                    <p class="d">
                        bob,03/09/2009 12:23:55</p>
                </div>
            </div>
        </li>
    </ul>  </body>
</html>

Answer 1

在您的代码中，您没有实现多个类。最简单的我可以建议这个

.c { margin-left: 3px; }
.d { margin-top: 0px; }

将这些内容放入CSS中。

Answer 2

交换这些特定修补程序的类样式：

.n
{
    color: #758888;
    float: left;
    font-size: 12px;
    padding-right: 8px;
    line-height: 15px;
    width:15px;
}

为持有该号码的DIV添加了一个宽度。标记浮动元素的宽度不会有害。如果你不想，你不必拥有它。

.c
{
    float: left;
    width: 400px;
}

取消注释了您拥有的float:left;。这将允许您在此特定DIV浮动中的文本向左移动，并与保留该数字的早期.n类对接。

.noshow
{
    overflow:hidden;
    clear:both;
}

这是重要的部分。第一行将子元素保留在其父DIV内，而不是疯狂。否则，您将看到文档的其余部分步进。第二行只是确保DIV保持独立。

CSS对齐问题

2 个答案: