如果我问的是一个多余的问题,我很抱歉,但我尝试使用本网站中提供的几乎所有选项,作为初学者,我可能正在努力利用它们来发挥我的影响力,这是我为我的代码创建的 fiddle (添加了几个答案),我只是想将“添加答案(可选)”放入“tab-content”div,但它似乎没有随内容扩展,“添加答案”标签超出范围。有人可以建议出了什么问题吗?这将是很大的帮助...
HTML代码:
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Polls</li>
<li class="tab-link" data-tab="tab-2">tab2</li>
</ul>
<!-- Content for each tab is decided -->
<div id="tab-1" class="tab-content current">
<!-- To add answer options -->
<form action="ask_question" class="answer_options" method="POST">
<textarea name="question" class="question_textarea" type="text" placeholder="Your query, please ?"></textarea>
<div class="add_answer_label">Add Answers(optional)</div>
<div class="answers_textboxes">
<table id="dataTable">
<tr>
<td>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
</table>
<div class="clear"></div>
</div>
</form>
</div>
<div id="tab-2" class="tab-content">Tada</div>
</div>
CSS 文件
body {
margin-top: 100px;
font-family:'Trebuchet MS', serif;
line-height: 1.0
height: 100%;
}
.container {
width:800px;
margin: 0 auto;
overflow: auto;
min-height:100%;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #DFF5B0;
color: #222;
}
.tab-content {
display: none;
padding: 15px;
}
.clear {
width:100%;
float:none;
clear:both;
}
.tab-content.current {
display: inline-block;
background: #DFF5B0;
overflow:auto;
min-height:1%;
}
.question_textarea {
background: white;
border: 1px #ddd solid;
width: 600px;
height: 100px;
font: 9pt Consolas;
overflow: hidden;
}
form.answer_options {
width:754px;
margin: 20px auto 0px auto;
background-color:#DFF5B0;
padding:5px;
}
.answer_options .form label {
float: left;
text-align: left;
margin-right: 5px;
margin-top:2px;
width:auto;
}
.answer_options .form input {
width:100px;
}
.answer_options label {
color:#444;
width:48px;
float: left;
text-align: right;
margin-right: 6px;
margin-top:2px;
}
form.answer_options label.optional {
float: left;
text-align: right;
margin-right: 6px;
margin-top:2px;
color: #A3A3A3;
}
form.answer_options label.obinfo {
float:right;
padding:3px;
font-style:italic;
}
form.answer_options input {
width: 140px;
color: #000;
float: left;
margin-right: 5px;
}
form.answer_options input.long {
width: 247px;
color: #505050;
}
form.answer_options input.short {
width: 40px;
color: #505050;
}
form.answer_options input[type=radio] {
float:left;
width:15px;
}
form.answer_options label.gender {
margin-top:-1px;
margin-bottom:2px;
width:34px;
float:left;
text-align:left;
line-height:19px;
}
form.answer_options input[type=text] {
border: 1px solid #E1E1E1;
height: 18px;
}
form.answer_options input[type=password] {
height: 18px;
}
form.answer_options input[type=button] {
background:#9b1515;
border: 1px #ddd solid;
}
form.answer_options input[type=button]:hover {
cursor:pointer;
background:#d85353;
}
form.answer_options .submit {
color: #fff;
cursor: pointer;
float:left;
margin:10px;
padding:5px;
background: #9b1515;
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.1)), color-stop(1, rgba(255, 255, 255, 0.1)));
}
form.answer_options .submit:hover {
background:#505050;
}
form.answer_options .submit:active {
background:#ccc;
color: #000;
}
form.answer_options input[type=text].small {
height: 18px;
width:30px;
}
form.answer_options input[type=checkbox] {
width:14px;
margin-top:4px;
}
form.answer_options select {
border: 1px solid #E1E1E1;
float:left;
margin-bottom:3px;
color: #505050;
margin-right:5px;
}
.post_query {
height: 39px;
left: 760px;
position: absolute;
top: 274px;
width: 40px;
z-index: 3;
}
.answers_textboxes {
height: 39px;
left: 500px;
position: absolute;
top: 288px;
width: 144px;
z-index: 3;
}
.add_answer_label {
height: 39px;
left: 335px;
position: absolute;
top: 293px;
width: 163px;
z-index: 3;
}
.add_answer_image {
position: absolute;
top: 289px;
}
.polls_tab {
background:#DFF5B0;
}
提前致谢
最佳答案
欢迎来到 HTML 和 CSS 的有趣世界。
正如 jmore 在他的回答中指出的那样,您遇到的问题是由于 position:absolute
导致元素从 DOM 流中取出。如果您还没有机会,请查看这篇解释位置工作原理的 MDN 文章。正如您可能从我们的评论中看到的那样,这是一个需要理解的重要概念:)
MDN 文章:https://developer.mozilla.org/en-US/docs/Web/CSS/position
您可以通过多种方式完成您想要完成的工作(正如 jmore 指出的那样),但最简单的方法是包装您的元素,然后将包装器 float 到右侧。使用您的标记,您会看到我将两个 div 包装在一个容器 div 中,additionalAnswersWrapper
。
<div class="additionalAnswersWrapper">
<div class="add_answer_label">Add Answers(optional)</div>
<div class="answers_textboxes">
<table id="dataTable">
<tr>
<td>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
</table>
<div class="clear"></div>
</div>
</div>
一旦你包装了你的 div,你将只想 float
那个元素。
这是一个 fiddle 演示:http://jsfiddle.net/83PTq/4/
我想花时间指出一些其他的事情,这些事情会在您继续学习的过程中对您有所帮助。
- 您应该避免使用表格进行布局。表格用于表格数据,因此使用它来包装您的输入是不好的做法。
- 有一个网页设计概念称为“响应式设计”。虽然我不会过多地涉及响应式设计(这超出了这个问题的范围),但有一种想法是您的页面应该适用于所有设备。通过硬编码
widths
(例如,textarea),您已经限制了元素。您可以使用媒体查询来更改宽度,但让parent
处理它会容易得多。
希望这个回答对您有所帮助。
关于javascript - DIV 不随内容扩展 - 使用的方法(最小高度,溢出 :hidden, 清除 div.. 没有工作:-( ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23527582/