Question

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

我想要标签（labelDay）和第一个文本块（dayInput）下的按钮（generateButton）和answer（answerField）文本块，但是当我在按钮和答案框上清除它时，它会在标签下面设置按钮，第一个输入框，但我的答案框在我的按钮下，它需要除此之外。有没有办法在没有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

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

浮动使元素＆＃34;流动＆＃34;在彼此的周围 - 你可以想象一堆float: left元素，每个元素都试图尽可能向左移动，而不会触及另一个元素，或者在转到下一行之前离开屏幕的一侧。

元素上的清除强制自身，以及其后的任何浮动元素到下一行 - 因此#generatButton上的清除已经开始第二行，而#answerField开启了不需要的内容第三个。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

为什么在这种情况下使用浮动？所有元素都是内联元素。所以他们会彼此相邻。

我的方法是为行定义两个div块（无css）：

＆＃13;

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

＆＃13;

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

2 个答案: