выравнивание набора кнопок и текстуры

Я пишу небольшой веб-сайт, который имеет кнопки серии над текстурой. Я хотел бы подчеркнуть презентацию, в частности, я хотел бы выровнять кнопки с текстовым полем.выравнивание набора кнопок и текстуры

До сих пор мой HTML является:

<form action='/submit', method="GET"> 
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button1"></td> 
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button2"></td> 
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button3"></td> 
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button4"></td> 
    <td><INPUT TYPE=SUBMIT name="submit" value="Submit" style="float: right"></td> 
    <td><INPUT TYPE=Reset name="reset" value="Reset" style="float: right"></td> 
    <Textarea id="ta" name="package" ROWS=100 COLS=111>{{package['text']}}</textareaa> 
</form>

Я хотел бы все кнопки и текстовой области выстраиваться на правом и левом краях, а Submit/Сброс кнопки всплывать вправо.

Я включил быстрый рисунок того, что я хотел:

источник

2017-01-11 Tom Kealy

Пожалуйста, ознакомьтесь с [спросить]. Ключевые фразы: «Поиск и исследование» и «Объясните ... любые трудности, которые мешали вам самим решить». Прямо сейчас я ничего не вижу о том, что вы пытались решить самостоятельно. –

.form{ 
 
    height : 250px; 
 
    Width : 250px; 
 
} 
 
.form :nth-child(6){ 
 
    float:right; 
 
} 
 
.btn{ 
 
    display:inline-block; 
 
    width : 23%; 
 
    height : 25px; 
 
    background-color : lightgray; 
 
    border : 1px solid black; 
 
} 
 

 
.textarea{ 
 
    width : 100%; 
 
    height:200px; 
 
    background-color : darkgray; 
 
    border : 1px solid black; 
 
}

<div class="form"> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="textarea"></div> 
 
</div>

источник

2017-01-11 18:26:30 jmag

Я предполагаю, что право и левое поле имеют одинаковую ширину. В этом случае оберните весь контент в div, задайте стиль css, покажите: inline-block и text-align: center. Это приведет к выравниванию div в центре (по горизонтали). Теперь задайте размер ширины соответствующим образом (скажем, если вы установите его на 80% ширины, то он оставит 10% пробела как слева, так и справа.)

Используйте float: влево или вправо, чтобы установить положение соответственно.

источник

2017-01-11 16:47:15

выравнивание набора кнопок и текстуры

ответ

Смежные вопросы