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

我目前在尝试添加一些输入框之间的间距时遇到了一些麻烦。我曾尝试将padding添加到它，但它所做的只是移动框，而不是在它们之间放置空格。通过CSS在输入框之间添加间距

我的代码如下：由 '没关系' 提出

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

<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>

来源

2016-11-25 alex johnson

添加显示：block to span .test。默认情况下，它是内嵌元素... – sinisake

非常感谢，这已成功 –

下次您提出问题时，请更具体地了解所需的结果。完全不清楚你是否想要***垂直空间。顺便说一句。 'center'已经被弃用了大约33年。 – connexo

答案已经工作:)

display:block;

来源

2016-11-25 14:47:00

这是正确的，但它仍然没有解决你的标记（HTML）问题。 –

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

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

 
.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=""/></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>

来源

2016-11-25 14:51:04

为什么你仍然在这个解决方案中使用'
'而不是简单地向'span'元素添加'margin-bottom'？ – connexo

甚至不需要。刚刚删除了不需要的'
'标签，也修复了'input'标签 –

-1

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

.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>

来源

2016-11-25 15:05:43 TPLMedia24

对于'id' ***，任何给定值都必须在每个文档***中唯一。另外，你为什么在这里保留'span'元素？ – connexo

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

回答

相关问题