Question

我有一个网页，我正在尝试设置一个登录部分：我正在尝试将两个表单输入框彼此相邻（用于电子邮件和登录信息），但是，我也使用CSS来自定义那些盒子。当我使用我当前拥有的代码时，这些框出现在不同的行中，而不是同一行。

以下是相关代码：

的index.html：

<div class="loginwrap">
    <div class="logincontent_wrap">
    <div class="logincontent">
    <div class="loginaction">
    <form action="/" method="post" class="invite_form" autocomplete="off">
        <div class="logininput_row">
            <input type="text" class="logininput" value="" name="loginemail" id="loginemail"/>
            <span class="logininput_overlay">Account email</span>
        </div>
        <div class="logininput_row">
            <input type="password" class="logininput" value="" name="loginpassword" id="loginpassword"/>
            <span class="logininput_overlay">Password</span>
        </div>

    </form>
    </div>
    </div>
    </div>
    </div>

CSS文件：

    .loginwrap {
    margin: 0 auto;
    width: 900px;
}
.logincontent_wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    /*box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);*/
    padding: 5px;
    width: 100%;
}
.logincontent {
    background: none repeat scroll 0 0 #FFFFFF;
    overflow: hidden;
    padding: 0px;
}

.logincontent .loginaction {
    float: right;
    width: 400px;
}
.logincontent .loginaction_text {
    color: #555555;
    font-size: 14px;
    font-weight: bold;
}
.logincontent .logininput_row {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 4px 0;
    position: relative;
    width: 140px;
}
.logincontent .loginbutton_row {
    margin: 8px 0;
}
.logincontent .logininput, .logincontent .logininput_overlay {
    color: #777777;
    font-size: 12px;
    font-weight: bold;
}
.logincontent .logininput.error {
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    border: 1px solid #EE5F5B;
}
.logincontent .logininput_overlay {
    left: 11px;
    position: absolute;
    top: 10px;
    z-index: 0;
}
.logincontent .logininput_overlay.focus {
    color: #CCCCCC;
}
.logincontent .logininput {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #BBBBBB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    line-height: 14px;
    margin: 0;
    padding: 9px 9px 8px;
    position: relative;
    width: 140px;
    z-index: 1;
}

我知道div命令会生成另一行，但我不知道另一个命令要包含CSS文件中的类信息，并且框彼此相邻。谢谢您的帮助。

Answer 1

div是一个块元素，意味着它将拥有自己的行。

在css中使用

logininput_row{display: inline}

或将两个输入写入一个div，或使用提到的浮动

Answer 2

不确定宽度，但float: left应该有效......

.logininput_row {
  float:left;
}

Answer 3

就像Mike S.所说，您可以将显示从块更改为内联。另一种方法是通过浮动元素来改变定位。

.logincontent .logininput_row {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 4px 0;
    position: relative;
    width: 180px;
    float: left;
}

Answer 4

这使元素彼此相邻。不过请注意，我删除了您的position: relative和position: absolute样式，因为它们会导致问题，可能没有必要。如果您希望将Account Email和Password显示为字段提示，则有比您正在做的更好的方法。例如，HTML5's placeholder是一个不错的选择：

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

.loginwrap {
    margin: 0 auto;
    width: 900px;
}
.logincontent_wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    /*box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);*/
    padding: 5px;
    width: 100%;
}
.logincontent {
    background: none repeat scroll 0 0 #FFFFFF;
    overflow: hidden;
    padding: 0px;
}

.logincontent .loginaction {
    float: right;
    width: 400px;
}
.logincontent .loginaction_text {
    color: #555555;
    font-size: 14px;
    font-weight: bold;
}
.logincontent .logininput_row {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 4px 0;
    width: 140px;
    margin: 8px 0;
    float: left;
}
.logincontent .logininput, .logincontent .logininput_overlay {
    color: #777777;
    font-size: 12px;
    font-weight: bold;
}
.logincontent .logininput.error {
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    border: 1px solid #EE5F5B;
}
.logincontent .logininput_overlay {
    /*left: 11px;
    position: absolute;
    top: 10px;
    z-index: 0;*/
}
.logincontent .logininput_overlay.focus {
    color: #CCCCCC;
}
.logincontent .logininput {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #BBBBBB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    line-height: 14px;
    margin: 0;
    padding: 9px 9px 8px;
    width: 140px;
}

http://jsfiddle.net/mNmgk/2/

Answer 5

.logininput_row
{
   display:inline-block
   margin:0 5px;
   padding:5px;
}
.logininput_row input
{
   vertical-align:middle;
}

定位两个相邻的文本框

5 个答案: