1

我创建了一个简单的页面，用于通过 jquery/ajax 处理三个表单。一切正常，但不知何故我似乎无法调试这个简单的 CSS 问题。我有一个父 DIV，里面有三个 DIV，每个 DIV 都包含一个表单和提交表单时的相关成功消息。如果有人可以看看它，我将不胜感激。你可以在这里找到它（链接）。样式表可以通过源码看到，真的很简单。我在下面包含了页面架构的要点和我编写的一些 CSS。

HTML

<div id="wrap">

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

</div>

CSS

#wrap{
    width:900px;
    height:450px;
    margin:25px;
    padding:0;
    }

div.form-container {
    background:#9c9;
    width:300px;
    height:100%;
    float:left;
    position:relative;
    padding:0;
    }

div.success{
    background:#ffa07a;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

form {
    background:#999;
    float:left;
    position:relative;
    padding:10px;
    }

您会注意到第二个和第三个表单容器的顶部有 19px 的边距，但这在 CSS 中的任何地方都没有体现。我一直试图调试这个几个小时无济于事。我几乎不好意思寻求帮助，因为我知道这一定很简单。我已经移动了几乎所有元素以找到问题，但没有任何改变！我可以使用负边距将两个容器拉起，但我认为我不需要这种修复。

谢谢参观，

麦克风

4

2 回答 2

2

这可能不是唯一的问题，但是您有一个成功 div 的 id，但您的 css 正在调用一个成功类。

<div id="success">

你的CSS是

div.success{
    background:#ffa07a;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

将您的 HTML 更改为

<div class="success">

编辑：

在您的文本页面中，您在BRs 之后有divs。删除这些和所有内容。

于 2012-04-15T22:07:54.017 回答
2

我认为<br>每个标签之间的标签<div class="form-container">是造成边距的原因。

于 2012-04-15T22:12:01.147 回答