Question

我试图将我的下拉列表与左侧的textarea垂直对齐，我有一个问题。我不知道它为什么会发生冲突。

编辑：感谢您的帮助，我已做出改变以实现它。

JSP：

.ExeDropdown{
  	float:left;
    margin-left:50px;
}
div.txt1{
    float: left;
    margin-left:50px;
}
div.txt2{
    float:right;
    margin-right: 120px;
}
.txt3{
  	float:right;
	  margin-right: 120px;
}
#subBtn{
  	position: absolute;
    bottom: 20%;
    left:47%;
}

<div class="ExeDropdown">
    Select an exercise: 
    <select name="ProgExe">
      <option value="exe1">Exercise 1</option>
      <option value="exe2">Exercise 2</option>
    </select>
</div>    
<div class="txt1" >
    <p>Write your source code here:</p>
    <textarea id="myTextArea" rows="5" cols="40" name="txtInput" >
    </textarea>
</div>

https://i.stack.imgur.com/Vok8d.jpg

Answer 1

取出你提到的两个元素{。{1}}（.ExeDropdown，div.txt1）。

它应该工作

Answer 2

你走了：

HTML：

<div class="ExeDropdown">
Select an exercise: 
<select name="ProgExe">
  <option value="exe1">Exercise 1</option>
  <option value="exe2">Exercise 2</option>
</select>
</div>    
<div class="clear"></div>
<div class="txt1" >
<p>Write your source code here:</p>
<textarea id="myTextArea" rows="5" cols="40" name="txtInput" >
</textarea>
</div>

CSS：

.clear{clear:both;}

Answer 3

在它之前添加一个（line-）中断：

Select an exercise: 
<br /> <!-- here -->
<select name="ProgExe">

如何垂直对齐左右两个div？

3 个答案: