我很抱歉,如果我问一个多余的问题,但我试图使用本网站提供的几乎所有选项,作为初学者可能是我正在努力将它们用于我的杠杆,这是我为我的代码创建的小提琴(添加了几个答案),我只是试图将“添加答案(可选)”放入“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;
}
提前致谢
答案 0 :(得分:0)
欢迎来到HTML&amp;的有趣世界CSS。
正如jmore在他的回答中指出的那样,你遇到的问题是由于position:absolute
导致元素被从DOM流中取出。如果您还没有机会,请查看这篇解释位置如何工作的MDN文章。正如您可能从我们的评论中看到的那样,理解这是一个重要的概念:)
MDN文章:https://developer.mozilla.org/en-US/docs/Web/CSS/position
你想要完成的事情可以通过几种方式完成(正如jmore指出的那样),但是简单的方法是包装你的元素然后将包装器浮动到右边。使用你的标记,你会看到我将两个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
该元素。
这是一个小提示,展示:http://jsfiddle.net/83PTq/4/
我想花时间指出其他一些可以帮助你继续学习的东西。
widths
(例如,textarea),您已经约束了元素。您可以使用媒体查询来更改宽度,但让parent
更容易处理。希望这个答案很有帮助。
答案 1 :(得分:-2)
它是因为您正在使用absolute
定位,这会将元素从文档流中分离出来。定位事物是不好的做法,应该是最后的结果。摆脱它并使用float
或display: inline-block
.answers_textboxes {
height: 39px;
width: 144px;
z-index: 3;
display: inline-block;
vertical-align: top;
margin: 5px 0 0 0;
}
.add_answer_label {
height: 39px;
width: 163px;
z-index: 3;
display: inline-block;
vertical-align: top;
margin: 5px 0 0 0;
}