Проблема вертикального выравнивания CSS с элементами списка и текстовыми областями - PullRequest
Новая
       0

Проблема вертикального выравнивания CSS с элементами списка и текстовыми областями

0 голосов
/ 02 сентября 2010

Я пытаюсь заставить пули элемента списка двигаться вверх. Как вы можете видеть на изображении ниже, красный цвет - это то, где я хотел бы все. Пули и выпадающие списки должны двигаться вверх. Эти поля являются динамическими и взяты из БД. Я очень хочу, чтобы это выглядело по центру и красиво, и я не могу понять

Спасибо за любую помощь, Antoni

! [Альтернативный текст] [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

EDIT: Добавлен 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>

1 Ответ

0 голосов
/ 02 сентября 2010

Какие HTML-элементы вы используете?

, если вы используете базовый HTML-тег, такой как table и td, попробуйте это: 

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

надеюсь, это поможет ..

...