Поместите div в одну строку

0

У меня есть форма, где я хочу поместить некоторые элементы <div> в одну строку.

Я хочу подтвердить пароль в той же строке, что и пароль.

HTML

<form action="pages/php/signup.php" method="post">
    <div>
        <div>Name :
            <div id="gtext_form">
                <input type="text" name="name" />
            </div>
        </div>
    </div>
    <div class="line">
        <div class="st_column">E-mail :
            <div class="text_form">
                <input type="text" name="email" />
            </div>
        </div>
        <div class="nd_column">Login :
            <div class="text_form">
                <input type="text" name="login" />
            </div>
        </div>
    </div>
    <div class="line">
        <div class="st column">Password :
            <div class="text_form">
                <input type="password" name="password" />
            </div>
        </div>
        <div class="nd_column">Confirm password :
            <div class="text_form">
                <input type="password" name="password2" />
            </div>
        </div>
    </div>
    <div class="line">
        <input type="submit" name="valider" value="  OK   " />
    </div>
</form>

CSS

#gtext_form input {
    width: 640px;
    height: 20px;
}
.text_form input {
    width: 280px;
}
.st_column {
    float: left;
    width: 280px;
    display: inline;
}
.nd_column {
    float: right;
    width: 280px;
    display: inline;
}
.line {
    padding-right:0px;
    padding-left:0px;
    width: 640px;
    height: 60px;
}

JSFiddle

  • 0
    Вы пробовали display:inline для элементов <div> ?
  • 0
    да, я пробовал показывать много вещей: встроенное было одной из первых вещей, которые я попробовал.
Показать ещё 4 комментария
Теги:

5 ответов

3
Лучший ответ

В имени вашего класса есть ошибка:

    <div class="st column">Password :<div class="text_form"><input type="password" name="password"/></div></div>

Имя должно быть st_column

Поделиться
  • 0
    Спасибо, я потерял почти 2 часа за эту глупую ошибку
1

В вашей второй <div class="line">

У вас есть div, который гласит:

<div class="st columns">

Однако это должно быть:

<div class="st_columns">

JsFiddle

Поделиться
1

Причина, по которой пароль подтверждения не был в той же строке, что и пароль, потому что вам не хватает _ в имени класса: http://jsfiddle.net/7a9dL/2/

Исправлен HTML:

<form action="pages/php/signup.php" method="post"> 
<div><div>Name :<div id="gtext_form"><input type="text" name="name"/></div></div></div>
<div class="line">
    <div class="st_column">E-mail :<div class="text_form"><input type="text" name="email"/></div></div>
    <div class="nd_column">Login :<div class="text_form"><input type="text" name="login"/></div></div>
</div>
<div class="line">
    <div class="st_column">Password :<div class="text_form"><input type="password" name="password"/></div></div>
    <div class="nd_column">Confirm password :<div class="text_form"><input type="password" name="password2"/></div></div>
</div>
<div class="line"><input type="submit" name="valider" value="  OK   " /></div>
</form>
Поделиться
1

Попробуйте добавить это:

.line div {
    display: inline-block;
}

Протестировано с помощью Firefox 27.

Поделиться
1

Привет, у вас не было класса для правильного пароля int he html. Он отсутствовал и подчеркивал. Попробуйте что-то вроде этого:

JS Fiddle

Измените свой класс на Password в html на: class="st_column"

CSS

#gtext_form input {
    width: 640px;
    height: 20px;
}
.text_form input {
    width: 280px;
}
.st_column {
    float: left;
    width: 280px;
    display: inline;
}
.nd_column {
    float: right;
    width: 280px;
    display: inline;
}
.line {
    padding-right:0px;
    padding-left:0px;
    width: 640px;
    height: 60px;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню