Question

我正在尝试将固定高度为100px的文本字段和随后的输入字段放入页面中，所有文件都向左浮动。如果我要在页面中依次放置两个文本字段，并且我想在两个字段之间提供间距，我传统上会使用一个
标签在两个元素之间提供一个行间距。

<input type="text" class="formInput" name="item1" placeholder="item 
    <br>    
    <input type="text" class="formInput" name="item2" placeholder="item2">

当我尝试在我的文本字段后执行相同的操作时，在我碰到第4或第5个标记之前没有间距。

    <textarea class="formInput" name="item3" placeholder="item3" style="height: 100px">
</textarea>     
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>        
        <input type="text" class="formInput" name="item4" placeholder="item4" style="clear: both; float:left;">

我认为这是因为
标签从页面中最后一个元素的开头开始索引换行符大小，而不是页面上显示的最终高度。为此，任何人都可以建议一个合适的方式来构建我的HTML或后续样式，所以我不必使用5个标签来适当地分隔文本和输入字段？也许在CSS中有更有效的HTML元素或技巧？

编辑：这是与类

的这些元素相关联的css

.formInput{
float: left;
border: 1px solid #999999;
border-radius: 3px;
width: 200px;
height: 20px;
font-size: 1.2em;

}

显而易见，有必要更充分地回答这个问题。

Answer 1

首先，如果你想让它们都向左浮动，用一个具有float：left风格的div包围两个输入并在它们之间使用一个换行符。

至于分隔字段，你最好在任一输入设置上使用顶部（或底部）边距来给它们适当的分离。

<div style="float:left;"> 
    <textarea class="formInput" name="item3" placeholder="item3" style="height: 100px;margin-bottom:50px;"></textarea>
    <br/>
    <input type="text" class="formInput" name="item4" placeholder="item4"/>
</div>

示例JSFiddle：http://jsfiddle.net/ncr61xvL/

Answer 2

<html>
<head>
<style>
  .container{
    width: 300px;
  }
  input[type='text'],textarea{
    width: 200px;
    float: left;
    padding: 5px;
    margin: 10px;
  }
</style>
</head>
<body>
<div class="container">
  <input type="text" class="formInput" name="item1" placeholder="item1">
  <input type="text" class="formInput" name="item2" placeholder="item2">
  <textarea class="formInput" name="item3" placeholder="item3" style="height: 100px"> </textarea>
  <input type="text" class="formInput" name="item4" placeholder="item4" style="clear: both; float:left;">
</div>

</body>
</html>

https://jsfiddle.net/kjtn1eht/

如何在固定高度的文本字段和后续输入字段

2 个答案: