定位两个相邻的文本框

我有一个网页，我正在尝试设置一个登录部分：我试图让两个表单输入框彼此相邻（用于电子邮件和登录信息），但是，我也是使用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文件中的类信息，并使这些框相邻。感谢您的帮助。

来源

2011-12-17 user1072337

？你能展示一张图片，甚至是一张ASCII艺术素描吗？ – 2011-12-17 22:19:54

将'float：left;'添加到'logininput_row'语句。我不确定你有足够的'DIV'元素在那里......'）' – 2011-12-17 22:20:20

@DavidThomas - 我想象OP希望用户名和密码字段彼此相邻。要求ASCII艺术尽管是原创的。 '：D' – 2011-12-17 22:21:15

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

在CSS中使用

logininput_row{display: inline}

或写两个输入到一个DIV，或者使用所提及浮动

来源

2011-12-17 22:20:16

这工作，谢谢。我不想按照所有人的建议“向左飘浮”，因为我想在包装的右侧放置两个盒子。这是我正在寻找的。 – user1072337 2011-12-17 23:04:08

使用后，现在我的文本叠加在我的文本框中没有正确居中。有没有办法解决这个问题（我已经设置了其他文本框，它们在不同的行中，并且文本叠加层很好地对齐）。 – user1072337 2011-12-17 23:36:21

不能确定的宽度，但float: left应该工作...

.logininput_row { 
    float:left; 
}

来源

2011-12-17 22:20:21 BeaverProj

这本身不会工作：http://jsfiddle.net/mNmgk/1/ – 2011-12-17 22:24:32

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

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

来源

2011-12-17 22:30:56 Michiel

'位置：亲属'已经在OP的问题中的声明......？ – 2011-12-17 22:40:09

你是对的，它已经在那里，但我添加了float：left – Michiel 2011-12-17 23:13:45

这使元件彼此相邻。但是，请注意，我删除了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/

来源

2011-12-17 22:34:31

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

你想彼此相邻哪些元素

来源

2011-12-17 22:41:32 Philip

定位两个相邻的文本框

回答

相关问题