Question

想象我有这个div

<div class="div_pin" id="divOne">
<input name="pin1" type="text" size="5" maxlength="4" />
<input name="pin2" type="text" size="5" maxlength="4" />
<input name="pin3" type="text" size="5" maxlength="4" />
<input name="pin4" type="text" size="5" maxlength="4" />
</div>

输入都在一起，我如何定位它们？

Answer 1

你可以这样设计：

个人（按名称）

input[name=pin1]{
    display: inline-block;
     margin-right: 20px;

}

所有（按类型）

input[type=text]{
    display: inline-block;
     margin-right: 20px;
 }

如果你只想在这个标记HTML中使用而不是所有网站只使用输入规则之前的包装div：

.div_pin input[type=text]{
        display: inline-block;
         margin-right: 20px;
     }

Answer 2

假设你想要垂直间距。

在您的输入中添加课程。

<强> HTML

<div class="div_pin" id="divOne">
  <input class="MyInput" name="pin1" type="text" size="5" maxlength="4" />
  <input class="MyInput" name="pin2" type="text" size="5" maxlength="4" />
  <input class="MyInput" name="pin3" type="text" size="5" maxlength="4" />
  <input class="MyInput" name="pin4" type="text" size="5" maxlength="4" />
</div>

设置输入样式。

<强> CSS

<style>
    .MyInput{
        margin:10px 0;
    }
</style>

Html - 如何在同一个div中定位文本框/输入？

2 个答案: