gpt4 book ai didi

列表项和文本区域的 CSS 垂直对齐问题

转载 作者:行者123 更新时间:2023-11-28 14:56:00 25 4
gpt4 key购买 nike

我正在尝试让列表项的元素符号向上移动。正如您在下图中看到的,红色是我想要一切的地方。元素符号和下拉菜单需要向上移动。这些字段是动态的,来自数据库。我非常希望它看起来居中且美观,但无法弄清楚。


alt text

我使用的 CSS 是:

body { background: #CCCCCC; }
li { margin: .5em 0% .5em 0; }

#Questionaire {
background: #FFF;
width: 650px;
margin: 10px;
padding: 10px;
border: solid 2px;
}

编辑:添加了 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>

最佳答案

您使用哪些 html 元素?

如果你使用基本的 html 标签,比如 tabletd,试试这个:

<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---->

关于列表项和文本区域的 CSS 垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3622951/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com