Question

我目前在尝试在某些输入框之间添加间距时遇到一些麻烦。我已经尝试添加padding但它只是移动框，而不是在它们之间放置空格。

我的代码如下：

.test { 
  padding:20px 20px 20px 20px;
}
.ModifiedValues { 
  position: absolute;
  left: 250px;
  top: 20px;
  color: #666;
  font-size: 12px;
}

<div class="ModifiedValues">
  <center><b>New Value</b></center>
  <span class="test"><input type="text" name="firstname" value="" style="text-align:left;"><br></span>
  <span class="test"><input type="text" name="firstname" value="" style="text-align:left;"><br></span>
  <span class="test"><input type="text" name="firstname" value="" style="text-align:left;"><br></span>
  <span class="test"><input type="text" name="firstname" value="" style="text-align:left;"><br></span>
</div>

Answer 1

提出的回答“没关系”＆＃39;有效：）

display:block;

Answer 2

您需要添加display: block。看看：

＆＃13;

.test { 
  padding:5px 20px;
  display: block;
}
.ModifiedValues { 
  position: absolute;
  left: 250px;
  top: 20px;
  color: #666;
  font-size: 12px;
}	

.ModifiedValues { 
        position: absolute;
        left: 250px;
        top: 20px;
        color: #666;
        font-size: 12px;
     }

＆＃13;

<div class="ModifiedValues">
    <center><b>New Value</b></center>
    <span class="test"><input type="text" name="firstname" value=""/></span>
    <span class="test"><input type="text" name="firstname" value=""/></span>
    <span class="test"><input type="text" name="firstname" value=""/></span>
    <span class="test"><input type="text" name="firstname" value=""/></span>
</div>

＆＃13;

Answer 3

您可以测试此代码。它的工作原理

.ModifiedValues { 
  position: absolute;
  left: 250px;
  top: 20px;
  color: #666;
  font-size: 12px;
}

.test { 
margin: 10px !important;
text-align: left;

}

<div class="ModifiedValues">
  <center><b>New Value</b></center>
  <div class="test">
        <span><input type="text" name="firstname" value="" ></span>
  </div>
   <div class="test">
        <span><input type="text" name="firstname" value="" ></span>
  </div>
   <div class="test">
        <span><input type="text" name="firstname" value="" ></span>
  </div>
   <div class="test">
        <span><input type="text" name="firstname" value="" ></span>
  </div>
   <div class="test">
        <span><input type="text" name="firstname" value="" ></span>
  </div>
</div>

通过CSS在输入框之间添加间距

3 个答案: