Html段落和字段集在同一行

Question

我希望<div>的子字段集和段落在同一行。

守则：

＆＃13;

＆＃13;

fieldset {
  width: 180px;
}
#login p {
  display: inline;
  float: right;
}

＆＃13;

<div id="login">
  <fieldset>
    <legend>Login</legend>
    Username  <br>
    <input type="text" name="username">
    <br>
    Password  <br>
    <input type="text" name="password"> <br>
    <br>
    <input type="submit" name="submit">
  </fieldset>
  <p>Here you can login or signup for our website</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个css

#login fieldset {
    width: 180px;
   float:left;
 }

    #login p {
    float:left;

 }

Answer 2

fieldset也是一个块元素！您还必须为display:inline设置fieldset，例如以下解决方案：

仅使用display:inline而不使用float的解决方案：

#login {
  background:blue;
}
fieldset {
  display:inline;
  width:180px;
}
#login p {
  display:inline;
  vertical-align:top;
}

<div id="login">
  <fieldset>
    <legend>Login</legend>
    Username  <br>
    <input type="text" name="username">
    <br>
    Password  <br>
    <input type="text" name="password"> <br>
    <br>
    <input type="submit" name="submit">
  </fieldset>
  <p>Here you can login or signup for our website</p>
</div>
<div>Hello World</div>

float使用clear的解决方案（以避免混乱！）：

使用float，您必须设置clear属性！

#login {
  background:blue;
}
#login:after {
  content:" ";
  display:block;
  clear:both;
}
fieldset {
  float:left;
  width: 180px;
}
#login p {
  display: inline;
  float: left;
}

<div id="login">
  <fieldset>
    <legend>Login</legend>
    Username  <br>
    <input type="text" name="username">
    <br>
    Password  <br>
    <input type="text" name="password"> <br>
    <br>
    <input type="submit" name="submit">
  </fieldset>
  <p>Here you can login or signup for our website</p>
</div>
<div>Hello World</div>