Выравнивание полей формы - PullRequest
1 голос
/ 09 февраля 2012

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

У меня есть 3 текстовых поля друг над другом, и я хочу получить комментариитекстовые поля выровнены по правому краю, я попытался сместить его правильно, а затем придав ему отрицательный верхний аргумент, чтобы переместить его вверх, но текст, который я хочу сказать «комментарии», не плавает с текстовыми полями, так как у него нетclass

Есть ли более простой способ сделать это?

    <style type="text/css">
    ![enter image description here][1]<!--
    body {
background-color: #FFF;
    }

    #form {
width:960px;
background-color:#edf8ff;
height:650px;
    }

    .gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
    }

    .gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
    }

    .gezza-comments{
width:437px;
height:300px;
float:right;
margin-top:-80px;
    }

    -->
    </style></head>

    <body>


    <div id="form">

    <form action="" class="gezza-form" method="post" >
    First Name<br />
    <input name="firstname" type="text" class="gezza-field" /><br/>
    Last Name<br />
    <input name="lastname" type="text" class="gezza-field" /><br/>
    Email Address<br />
    <input name="email" type="text" class="gezza-field" />
    Comments<textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea>
    </form>


    </div><!-- close form -->

Вот что я пытаюсь достичь

[1]: http://i.stack.imgur.com/g3yO8.png ПОСМОТРЕТЬ ИЗОБРАЖЕНИЕ

Ответы [ 2 ]

1 голос
/ 09 февраля 2012

Вы можете создать два элемента div для хранения других элементов и расположить их рядом друг с другом.

Вы можете использовать таблицу и объединять ячейки для хранения секции комментариев.

0 голосов
/ 09 февраля 2012

А если поменять .gezza-field на:

.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
float:left;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...