Question

我创建了一个简单的页面，用于通过jquery / ajax处理三个表单。一切都运行正常，但不知怎的，我似乎无法调试这个简单的CSS问题。我有一个父DIV，其中有三个DIV，每个DIV包含一个表单以及提交表单时的相关成功消息。如果有人可以看一下，我会非常感激。你可以在这里找到它（LINK）。样式表可以通过源查看，非常简单。我已经包含了下面页面架构的要点以及我编写的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的任何位置。我一直试图调试这几个小时无济于事。我几乎不好意思寻求帮助，因为我知道这一定很简单。我几乎移动了所有元素来找到问题，但没有任何改变它！我可以使用负边距将两个容器拉起来，但我不认为我应该需要这种修复。

谢谢你看看，

麦克

Answer 1

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

<div id="success">

你的css是

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

将您的HTML更改为

<div class="success">

修改

在您的文字页面中，您在BR之后div秒。删除那些和所有内容。

Answer 2

我认为每个<br>之间的<div class="form-container">代码会导致边距。

简单的CSS格式问题

2 个答案: