Выравнивание входов сверху и рядом друг с другом

0

Я пытаюсь выровнять 2 входа сверху каждого из них рядом с двумя другими входами друг на друга. Вот что он дает мне:

http://prntscr.com/33k6bq

Кажется, у них нет проблем с 2 из них, но с рядом 2 рядом они просто не хотят работать.

Вот стиль для них:

CSS:

.loginbutton {
   font-family: 'Nunito';
   color: #fff;
   font-size: 16px;
   background-image: url(../images/gradient.png);
   background-position: 0, center;
   display: inline-block;
   background-color: #81bb0f;
   height: 71px;
   width: 100px;
   margin-left: 10px;
   box-shadow:0 0 0 1px rgba(0,0,0,.25) inset,0 0 0 2px rgba(255,255,255,.25) inset;
   border: 1px solid #919191;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 2px;
   padding: 10px
}

HTML:

<form method="post" id="phase-0-form">
  <input type="text" id="habbo-name" placeHolder="Username" size="35" value="<?php echo $template->form->reg_username; ?>" name="reg_username" class="logintext" maxlength="32"> 
  <input type="text" id="email" size="35" placeHolder="Email" name="reg_email" value="<?php echo $template->form->reg_email; ?>" class="logintext" maxlength="48"><br>
  <input type="password" id="password" placeHolder="Password" size="35" name="reg_password" value="" class="logintext" maxlength="32" style="float: left;">
  <input type="password" id="password2" placeHolder="Confirm Password" size="35" name="reg_rep_password" value="" class="logintext" maxlength="32"> 
  <input type="password" id="seckey" size="35" placeHolder="Security Key" name="reg_seckey" value="1111" hidden="yes" class="text-field" maxlength="4" >
  <button type="submit" name="register" class="loginbutton" style="float: right">Register NOW</button>
</form>
  • 0
    Отредактированный поток с HTML
Теги:

3 ответа

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

Обновлен JSFiddle здесь

У вас был float: right в вашем CSS (в input.logintext) - это то, что испортило его.

Я также удалил style="float: left;" от ввода пароля, поскольку это не требуется

Обновление: я повторно заказал поля и добавил кнопки в divs

HTML:

<div id="logincontainer">
    <form method="post" id="phase-0-form">

        <div style="float:left;">
            <a href="index"><div class="regbutton">Go back to Index</div></a>
        </div>

        <div style="float:left;">
            <input type="text" id="habbo-name" placeHolder="Username" size="35" value="<?php echo $template->form->reg_username; ?>" name="reg_username" class="logintext" maxlength="32" /><br />
            <input type="password" id="password" placeHolder="Password" size="35" name="reg_password" value="" class="logintext" maxlength="32" />
        </div>

        <div style="float:left;">
            <input type="text" id="email" size="35" placeHolder="Email" name="reg_email" value="<?php echo $template->form->reg_email; ?>" class="logintext" maxlength="48" /><br />
            <input type="password" id="password2" placeHolder="Confirm Password" size="35" name="reg_rep_password" value="" class="logintext" maxlength="32" />
            <input type="password" id="seckey" size="35" placeHolder="Security Key" name="reg_seckey" value="1111" hidden="yes" class="text-field" maxlength="4" />
        </div>

        <div style="float:left;">
            <button type="submit" name="register" class="loginbutton">Register NOW</button> 
        </div>
    </form>
</div>
<div id="container">
    <div class="image"></div>
</div>

CSS:

@import url(http://fonts.googleapis.com/css?family=Lato);
 @import url(http://fonts.googleapis.com/css?family=Ubuntu);
 @import url(http://fonts.googleapis.com/css?family=Nunito);
 body {
    background: url(../images/bg2.png) repeat-x bottom fixed;
    background-color: #3aa4e2;
    font-family:'Lato';
    margin-top: 70px;
}
#container {
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 371px;
    width: 780px;
    border: 1px solid #919191;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    padding: 10px;
    margin-top: 10px
}
input.logintext {
    width: 180px;
    height: 12px;
    padding: 10px;
    border: 1px solid #919191;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 2px;
}
.loginbutton {
    font-family:'Nunito';
    color: #fff;
    font-size: 16px;
    background-image: url(../images/gradient.png);
    background-position: 0, center;
    display: inline-block;
    background-color: #81bb0f;
    height: 71px;
    width: 100px;
    margin-left: 10px;
    box-shadow:0 0 0 1px rgba(0, 0, 0, .25) inset, 0 0 0 2px rgba(255, 255, 255, .25) inset;
    border: 1px solid #919191;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 2px;
    padding: 10px
}
.regbutton {
    text-align: center;
    font-family:'Nunito';
    color: #fff;
    font-size: 16px;
    background-image: url(../images/gradient.png);
    background-position: 0, center;
    float: left;
    display: inline-block;
    background-color: #e70505;
    height: 37px;
    margin-right: 21px;
    width: 100px;
    box-shadow:0 0 0 1px rgba(0, 0, 0, .25) inset, 0 0 0 2px rgba(255, 255, 255, .25) inset;
    border: 1px solid #919191;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 2px;
    padding: 16px
}
.fbbutton {
    text-align: center;
    font-family:'Nunito';
    color: #fff;
    font-size: 16px;
    background-image: url(../images/gradient.png);
    background-position: 0, center;
    float: left;
    display: inline-block;
    background-color: #3b5998;
    height: 37px;
    width: 100px;
    box-shadow:0 0 0 1px rgba(0, 0, 0, .25) inset, 0 0 0 2px rgba(255, 255, 255, .25) inset;
    border: 1px solid #919191;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 2px;
    padding: 16px;
    margin-right: 10px
}
.usersonline {
    text-align: center;
    font-family:'Nunito';
    color: #919191;
    font-size: 16px;
    background-image: url(../images/gradient.png);
    background-position: 0, center;
    float: left;
    display: inline-block;
    background-color: #e6e6e6;
    height: 37px;
    margin-right: 21px;
    width: 100px;
    box-shadow:0 0 0 1px rgba(0, 0, 0, .25) inset, 0 0 0 2px rgba(255, 255, 255, .25) inset;
    border: 1px solid #919191;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 2px;
    padding: 16px
}
.loginbutton:hover, .regbutton:hover, .fbbutton:hover, .usersonline:hover {
    opacity: 0.8;
}
#logincontainer {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 1px solid #919191;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    padding: 10px;
    height: 70px;
    width: 780px;
}
.image {
    background: url(../images/mainimg2.png);
    height: 371px;
    width: 780px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
Поделиться
  • 0
    Спасибо за ответ, это не сработало, вот что я получаю prntscr.com/33mzfg
  • 0
    Похоже, что у вас есть другой CSS где-то все портит. Можете ли вы опубликовать больше CSS с сайта или предоставить ссылку на сайт, чтобы мы могли на него посмотреть?
Показать ещё 5 комментариев
1

Есть много способов исправить это. Из-за отсутствия информации, которую вы предоставили, я могу предложить вам две вещи:

  • просто добавьте разрыв строки (<br>) после второго ввода
  • поместите входы внутри контейнера и убедитесь, что ширина контейнера позволяет ввести два входных поля, но не три
Поделиться
  • 0
    Разрыв строки не решает проблему
  • 0
    Тогда используйте другой. Я понятия не имел, как выглядит ваш код.
0

Трудно сказать, что это просто css и скриншот, но я предполагал, что они будут деформировать их в div следующим образом:

<div>
<input />
<input />
</div>
<div>
<input />
<input />
</div>

И устраивайте их позже css

Поделиться

Ещё вопросы

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