Question

我在这个页面上使用完全相同的方法，因为我在其余部分（工作正常）。所以我不确定是什么问题。我尝试了一些不同的东西，但似乎都没有。

显然我不能发布图片，因为我对这个精彩的网站很新。我把它们放在一边看。

第一张图片是它应该是什么样子。

www.beerbattle.net/correct.png

第二张图片是目前的样子。

www.beerbattle.net/incorrect.png

有问题的HTML：

<div style="clear: both;">&nbsp;</div>
<div>
<form id=submit_msg>
    <fieldset>
      <legend>Processed</legend>
      <ol id=whatever>
         <li id=whatever>
Thank you for your Submission of [Anheuser-Busch, Inc. Budweiser American Ale]
     </li>
      </ol>
        </fieldset>
    </form>
  </div>

CSS：

form#submit_msg {
    background: #FBB62D;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    width: 95%;
}

form#submit_msg fieldset {
    border: none;
    margin-bottom: 10px;
}

form#submit_msg fieldset:last-of-type {
    margin-bottom: 0;
}

form#submit_msg legend {
    color: #b55100;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #a4a4a4;
}

form#submit_msg fieldset fieldset legend {
    color: #111111;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 0;
}

form#submit_msg ol li {
    background: #b9cf6a;
    background: rgba(255,255,255,.3);
    border-color: #e3ebc3;
    border-color: rgba(255,255,255,.6);
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}
form#submit_msg ol ol li {
    background: none;
    border: none;
    float: left;
}

form#submit_msg label {
    float: left;
    font-size: 13px;
    width: 110px;
}
form#submit_msg fieldset fieldset label {
    background:none no-repeat left 50%;
    line-height: 20px;
    padding: 0 0 0 30px;
    width: auto;
}
form#submit_msg fieldset fieldset label:hover {
    cursor: pointer;
}

感谢任何帮助。如果您需要更多信息，我可以为您提供网站的登录凭据，以便实时查看

Answer 1

HTML中有几处错误。您的问题是您还没有关闭一些div标签。修复那些，页面应该没问题。 Validator report

正确页面的Dom看起来像这样：

<div id="page-bgbtm">
    <div id="whitespace">
        <div class="content"></div>
    </div>
    <div id="sidebar"></div>
</div>

虽然不正确的是：

<div id="page-bgbtm">
    <div id="whitespace">
        <div class="content">
            <div id="sidebar"></div>
        </div>
    </div>
</div>

因此，您可以看到侧边栏<div>位于内容div中。

div被定位不正确

1 个答案: