顶部和顶部的输入对齐彼此相邻

时间：2014-03-24 00:09:56

标签： html css

我试图将每个顶部的2个输入与另外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>

3 个答案:

答案 0 :(得分：1)

有很多方法可以解决这个问题。由于缺乏您提供的信息，我可以向您推荐两件事：

  • 只需在第二次输入后添加换行符（<br>）
  • 将输入放在容器内，并确保容器的宽度允许两个输入字段适合，但不能容纳三个

答案 1 :(得分：0)

很难从css和屏幕截图中分辨出来，但我的猜测是将它们像div一样扭曲它们：

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

稍后用css安排它们

答案 2 :(得分：0)

Updated JSFiddle here

你的CSS中有一个float: right（在input.logintext中） - 这就是弄乱它。

我还从密码输入中删除了style="float: left;"，因为这不是必需的

更新：我重新订购了字段并为div添加了按钮

<强> 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;
}
相关问题
最新问题