Question

我有以下代码，我无法访问要编辑的HTML。

<form>
   <div class="LoginDiv">
      <input type="text" name="user_login" tabindex="1" placeholder="Email"/>
   </div>
   <div class="LoginDiv">
      <input type="password" name="user_password" tabindex="2" placeholder="Password" />
   </div>
   <button type="submit">LOGIN</button>
</form>

根据图像显示。

我能够访问CSS，我希望能够强制输入字段，使它们内联。

这可能吗？

谢谢，

约翰

Answer 1

在这里，我猜你需要什么

.LoginDiv {
  display: inline-block;
 }

https://jsfiddle.net/21o0uL52/

Answer 2

您可以在输入中使用float:left，并使用class submit在div中添加按钮。将clear:both避免使用float

＆＃13;

form input{
 float:left;
}
.submit{
  clear:both;
}

＆＃13;

<form>
   <div class="LoginDiv">
      <input type="text" name="user_login" tabindex="1" placeholder="Email"/>
   </div>
   <div class="LoginDiv">
      <input type="password" name="user_password" tabindex="2" placeholder="Password" />
   </div>
   <div class="submit"><button type="submit">LOGIN</button></div>
</form>

＆＃13;

Answer 3

您只需使用display：inline。 EDITED

＆＃13;

div{
  display: inline;
}

＆＃13;

<form>
   <div class="LoginDiv">
      <input type="text" name="user_login" tabindex="1" placeholder="Email"/>
   </div>
   <div class="LoginDiv">
      <input type="password" name="user_password" tabindex="2" placeholder="Password" />
   </div>
   <button type="submit">LOGIN</button>
</form>

＆＃13;

JSFIDDLE

Answer 4

您可以将float: left提供给这些div的类，如下所示：

＆＃13;

.LoginDiv {
  float: left;
}

＆＃13;

<form>
  <div class="LoginDiv">
    <input type="text" name="user_login" tabindex="1" placeholder="Email" />
  </div>
  <div class="LoginDiv">
    <input type="password" name="user_password" tabindex="2" placeholder="Password" />
  </div>
  <button type="submit">LOGIN</button>
</form>

＆＃13;

jsFiddle

Answer 5

您可以使用内联表格和表格单元格。

display:inline-table;

见小提琴 https://jsfiddle.net/mLjh8230/

CSS强制内联输入字段

5 个答案: