Question

这是我的代码JsFiddle。如何在一行上对齐文本框和标签？

<div class="form-style-10">
   <form action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST">
      <input type=hidden name="orgid" value="00D90000000qWA6">
      <input type=hidden name="retURL" value="https://google.com">

      <div class="inner-wrap">
         <label for="first_name">First Name*</label>
         <input id="first_name" maxlength="40" name="first_name" size="50" type="text" required />          
      </div>
      <div class="button-section">
         <input type="submit" name="submit">
      </div>
   </form>
</div>

Answer 1

看起来你有宽度：你的css设置100％导致它换行。更改宽度以适合容器。

Answer 2

为标签和输入设置固定宽度，并为标签

设置向左浮动

.form-style-10 label{
    width:100px;
    float:left;
}
.form-style-10 input[type="text"], .form-style-10 input[type="date"], .form-style-10 input[type="datetime"], .form-style-10 input[type="email"], .form-style-10 input[type="number"], .form-style-10 input[type="search"], .form-style-10 input[type="time"], .form-style-10 input[type="url"], .form-style-10 input[type="password"], .form-style-10 textarea, .form-style-10 select {
    width: 270px;
}

请查看更新的jsfiddle

Answer 3

使用以下更改更新代码

.form-style-10 .inner-wrap{
float: left;
}
.form-style-10 label {
float: left;
width: 20%;
}
.form-style-10 input[type="text"], .form-style-10 input[type="date"], .form-style-10 input[type="datetime"], .form-style-10 input[type="email"], .form-style-10 input[type="number"], .form-style-10 input[type="search"], .form-style-10 input[type="time"], .form-style-10 input[type="url"], .form-style-10 input[type="password"], .form-style-10 textarea, .form-style-10 select{
float:left;
width: 80%;
}

如何将文本框和标签对齐在一行中

3 个答案: