我希望将#ClickWordList li 项置于消息框下方。我已经尝试了几乎所有的东西,但布局没有变化。我在网上查看并找到了 0 个解决方案。任何建议都非常欢迎。
HTML :
<h3 class="title">What new feature or section would you add?</h3>
<h3 class="message-box">Message Box</h3>
<div id="message-box-container">
<div class="form">
<div class="message">
<label for="txtMessage"></label>
<textarea id="txtMessage" name="txtMessage" class="txtDropTarget ui-droppable"></textarea>
</div>
<div class="clickable-questions">
<ul id="ClickWordList">
<li id="click1"></li>
<li id="click2"></li>
<li id="click3"></li>
</ul>
</div>
</div>
</div><!--message-box-container-->
CSS:
/*********** free form message styles ******/
.form{
display: flex;
}
.message {
display: flex;
flex-wrap: wrap;
flex-direction: column;
order: 1;
}
.message > textarea {
flex: 1;
min-width: 18rem;
max-height: 12rem;
font-size: 12px;
padding: 10px;
outline: none;
}
.clickable-questions {
flex: 1;
order: 2;
margin-right: 2rem;
}
#ClickWordList > li {
cursor: pointer;
padding-bottom: 13px;
line-height: 1.5;
font-size: 14px;
}
最佳答案
问题出在你放置flex-direction
的地方
你把它放在.message
里面阅读标记的方式使得 .message
在下一个结束 </div>
标签。
<div class="form">
<div class="message"><--!this is start of message container!-->
<label for="txtMessage"></label>
<textarea id="txtMessage" name="txtMessage" class="txtDropTarget ui-droppable"></textarea>
</div><--!this is end of message container!-->
你用css设置flex-direction
至 .message
, 但如您所见,.message
中没有嵌套任何内容除了 <label>
和 <textarea>
.
您只需移动 flex-direction:;
即可解决您的问题。和 flex-wrap:;
到 .form
用于获取结果的容器。
.form{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
请务必验证容器的嵌套方式。这将在您解决问题时节省时间。
关于css - 用于移动设备的 Flexbox 表单没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57401197/