具有列表項和文本區域的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元素？

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

希望對您有幫助。