CSS清除一个元素并使另一个元素跟随

Question

我正在做这个基本的东西，有一个标签后跟一个文本块，在另一行上有一个按钮，除了按钮之外还有一个文本块用于答案。

我想要标签(labelDay(下的按钮(生成按钮(和答案的文本块(answerField(和第一个文本块(dayInput(，但是当我清除按钮和答案框的左侧时，它会在标签和第一个输入框下设置按钮，但我的答案框在我的按钮下方，它需要在它旁边。有没有办法在没有br标签的情况下做到这一点？

这是我到目前为止的代码

#labelDay{
    margin-left: 5px;
    position: relative;
    float: left;
}
#dayInput{
    position: relative;
    float: left;
    margin-left: 5px;
}
#generateButton {
    float: left;
    clear: left;
}
#answerField{
    float: left;
    clear: left;
}

<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">

Answer 1

为什么在这种情况下

使用 float？所有元素都是内联元素。所以它们会彼此相邻出现。

我的方法是为行定义两个div 块(没有 css(：

<div>
  <label for="dayInput" id="labelDay">Geef een dag in:</label>
  <input type="text" id="dayInput"/>
</div>
<div>
  <input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
  <input type="text" id="answerField" class="answer">
</div>

Answer 2

你几乎拥有它 - 你只需要从#answerField中删除clear: left.

浮动使元素彼此"流动"——你可以想象一堆float: left元素，每个元素都试图尽可能向左移动，而不会碰到另一个元素或在进入下一行之前离开屏幕的一侧。

清除元素会

强制自己，并且它之后的任何浮动元素都会强制下一行 - 因此您的清除#generatButton已经开始第二行，而 on #answerField 正在开始不需要的第三行。

#labelDay{
    margin-left: 5px;
    position: relative;
    float: left;
}
#dayInput{
    position: relative;
    float: left;
    margin-left: 5px;
}
#generateButton {
    float: left;
    clear: left;
}
#answerField{
    float: left;
}

<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">