我试图让列表项的子弹向上移动。如下图所示,红色是我想要的一切。子弹和下拉列表需要向上移动。这些字段是动态的,来自db。我希望它看起来居中,漂亮,无法弄明白。
感谢您的帮助, 安东尼
![alt text] [1]
我使用的CSS是:
body { background: #CCCCCC; }
li { margin: .5em 0% .5em 0; }
#Questionaire {
background: #FFF;
width: 650px;
margin: 10px;
padding: 10px;
border: solid 2px;
}
http://i.stack.imgur.com/PXHaT.jpg
编辑: 添加了html
<div id="Questionaire">
<!--<input type="checkbox" id="cbxSurveyEnabled" value="On" />On-->
<ul id="QuestionContainer">
<li id='exists_27'><span><textarea rows='5' cols='60' id='exists_text_27'>Please rate the educational value of the reviewer</textarea></span><span><select id='exists_ddl_27'><option value='YesNo'>YesNo</option><option value='Scale1to3'>Scale1to3</option><option value='Scale1to5' selected>Scale1to5</option><option value='Checkbox'>Checkbox</option></select></span><span><a href='#' onclick="DeleteQuestion('exists_27'); return false;"><img src='images/remove.png' alt=x' /></a></span></li><li id='exists_4'><span><textarea rows='5' cols='60' id='exists_text_4'>On a scale of 1 to 3 how helpful did you find this response?</textarea></span><span><select id='exists_ddl_4'><option value='YesNo'>YesNo</option><option value='Scale1to3' selected>Scale1to3</option><option value='Scale1to5'>Scale1to5</option><option value='Checkbox'>Checkbox</option></select></span><span><a href='#' onclick="DeleteQuestion('exists_4'); return false;"><img src='images/remove.png' alt=x' /></a></span></li><li id='exists_1'><span><textarea rows='5' cols='60' id='exists_text_1'>Are you happy?</textarea></span><span><select id='exists_ddl_1'><option value='YesNo' selected>YesNo</option><option value='Scale1to3'>Scale1to3</option><option value='Scale1to5'>Scale1to5</option><option value='Checkbox'>Checkbox</option></select></span><span><a href='#' onclick="DeleteQuestion('exists_1'); return false;"><img src='images/remove.png' alt=x' /></a></span></li><li id='exists_32'><span><textarea rows='5' cols='60' id='exists_text_32'>Check if you are OK.</textarea></span><span><select id='exists_ddl_32'><option value='YesNo'>YesNo</option><option value='Scale1to3'>Scale1to3</option><option value='Scale1to5'>Scale1to5</option><option value='Checkbox' selected>Checkbox</option></select></span><span><a href='#' onclick="DeleteQuestion('exists_32'); return false;"><img src='images/remove.png' alt=x' /></a></span></li>
</ul>
<input type="button" onclick="submitData(); return false;" value="Submit" />
<input type="button" onclick="addQuestion(); return false;" value="Add question" />
</div>
答案 0 :(得分:0)
你使用什么html元素?
如果你使用像table和td这样的基本html标签,试试这个:
<table>
<!-----loop goes here--->
<tr>
<td valign="top">
<li />
</td>
<td valign="top">
<textarea></textarea>
</td>
<td valign="top">
<select>
<option>select 1</option>
<option>select 2</option>
</select>
</td>
</tr>
<!---end loop---->
</table>
如果您使用Div元素,请尝试:
<!-----loop goes here--->
<div>
<div style="float: left">
<li />
</div>
<div style="float: left">
<textarea></textarea></div>
<div>
<select>
<option>select 1</option>
<option>select 2</option>
</select>
</div>
</div>
<!---end loop---->
希望它有所帮助..