Question

代码有什么问题。边界有问题。

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
    <div id="USER" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
        <input id="txt_ID" type="text" style="width: 45%; float: left"/>
    </div>
    <div id="PASS" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
        <input id="txt_Password" type="text" style="width: 45%; float: left"/>
    </div>
</div>

Answer 1

您使用float元素，因此请在主div结束前添加clear: both

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
    <div id="USER" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
        <input id="txt_ID" type="text" style="width: 45%; float: left"/>
    </div>
    <div id="PASS" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
        <input id="txt_Password" type="text" style="width: 45%; float: left"/>
    </div>
    <div style="clear: both"></div>
</div>

Answer 2

你必须清除漂浮物。

添加以下css

#contents:after {
  content: '';
  display: table;
  clear:both;
}

Answer 3

您在内部div中使用浮动，因此父级没有高度。只需将float: left;设置为contents div即可看到您的问题。

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; float: left; left: 50%; border: 2px solid #73AD21;">
  <div id="USER" style="margin: 5px">
    <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
    <input id="txt_ID" type="text" style="width: 45%; float: left"/>
  </div>
  <div id="PASS" style="margin: 5px">
    <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
    <input id="txt_Password" type="text" style="width: 45%; float: left"/>
  </div>
</div>

您可能不应该使用inline-css而是使用外部css文件并使用clearfix来清除contents div上的浮点数。

Answer 4

您可以应用#contents { float: left}或使用clear浮动技巧获取内部元素高度：

#contents {
  width: 50%;
  height: auto;
  margin: 0 auto;
  left: 50%;
  border: 2px solid #73AD21;
}
#contents:after {
  content: '';
  display: block;
  clear: both;
}
#contents > div {
  margin: 5px;
}
#contents p {
  width: 50%;
  text-align: left;
  padding-left: 1%;
  float: right;
  font-size: large;
}
#contents input {
  width: 45%;
  float: left
}

<div id="contents">
  <div id="USER">
    <p>user :</p>
    <input id="txt_ID" type="text" />
  </div>
  <div id="PASS">
    <p>pass :</p>
    <input id="txt_Password" type="text" />
  </div>
</div>

Answer 5

这是因为您正在使用float - 这会使元素脱离正常流量，因为所有内容都会浮动，外部div没有高度。

改为使用display: inline-block：

<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
    <div id="USER" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; font-size: large; display: inline-block;"> user :</p>
        <input id="txt_ID" type="text" style="width: 45%; display: inline-block;"/>
    </div>
    <div id="PASS" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; font-size: large; display: inline-block;">pass :</p>
        <input id="txt_Password" type="text" style="width: 45%; display: inline-block;"/>
    </div>
</div>

link to fiddle

Answer 6

您的父容器正由float ed子容器折叠。我建议使用clearfix类：

＆＃13;

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

＆＃13;

<div class="cf" id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
    <div id="USER" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
        <input id="txt_ID" type="text" style="width: 45%; float: left"/>
    </div>
    <div id="PASS" style="margin: 5px">
        <p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
        <input id="txt_Password" type="text" style="width: 45%; float: left"/>
    </div>
</div>

＆＃13;

Clearfix来源：http://nicolasgallagher.com/micro-clearfix-hack/

有关clearfix的信息：What is a clearfix?

DIV流量和边界问题

6 个答案: