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

Question

我想让列表项的项目符号向上移动。正如你在下面的图片中看到的，红色是我想要的一切。子弹和下拉列表需要向上移动。这些字段是动态的，来自数据库。我非常希望它看起来很集中，很好，而且不能算出来。

感谢您的帮助， 安东尼

---

[替代文本] [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> 

Answer 1

您使用的是什么html元素？

如果使用如表和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----> 

希望它能帮助..