[英]CSS vertical alignment problem with list items and textareas
I am trying to get the list item's bullets to move up. 我正在尝试使列表项的项目符号向上移动。 As you can see in the image below the red is where I would like everything.
正如您在下图中所看到的,红色是我想要的所有内容。 The bullets and the dropdowns need to move up.
项目符号和下拉列表需要向上移动。 These fields are dynamic and come from a db.
这些字段是动态的,来自数据库。 Pretty much I want it to look centered and nice and can't figure it out.
我几乎希望它看起来居中且不错,无法弄清楚。
Thanks for any help, Antoni 感谢您的帮助,安东尼
![alt text][1] ![替代文字] [1]
The CSS I am using is: 我正在使用的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 http://i.stack.imgur.com/PXHaT.jpg
EDIT: Added the html 编辑:添加了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>
what html elemets do you use? 您使用什么HTML元素?
if you use basic html tag like table and td , try this: 如果使用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>
if you using Div elements try this: 如果您使用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---->
hope it help.. 希望对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.