0

我目前正在制作一个网站，注册页面需要：
- 名字
- 姓氏
- 用户名
- 电子邮件
- 密码
- 重新输入密码
我需要名字和姓氏输入并排且小，而下面的其他输入是大约两倍的宽度。像这样：

 Name
+-----------+    +-----------+
| first     |    | last      |
+-----------+    +-----------+

 Email
+----------------------------+
|                            |
+----------------------------+

我非常反对使用px并且绝对需要使用%宽度。
我不能进行小输入50%和大输入，100%因为两个小输入之间的空间没有考虑到，你知道吗？
我说的是这个空间：

 Name
+-----------+    +-----------+
| first     |<-->| last      |
+-----------+    +-----------+

所以这就是为什么我不能50%用于小型和100%大型的！
任何帮助是极大的赞赏！

4

3 回答 3

1

Here's a Fiddle 

<form>
  <input name="firstname" type="text" placeholder="First Name" class="small left"/>
  <input name="lastname" type="text" placeholder="Last Name" class="small"/>
  <input name="username" type="text" placeholder="User Name" class="big"/>
  <input name="email" type="text" placeholder="E-mail" class="big"/>
  <input name="password" type="password" placeholder="Password" class="big"/>
  <input name="rpassword" type="password" placeholder="Repeat Password" class="big"/>
  <button name="submit" type="">Sign Up</button>
</form>


form {
  background: #555;
  width: 350px;
  height: 300px;
  text-align: center;
  padding: 30px 15px;
  border-radius: 10px;
}
button {
  background: #04a9e8;
  position: relative;    
  margin: 25% auto;
  width: 140px;
  height: 24px;
  border: 1px solid #444;
  letter-spacing: 1px;
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
}
button:hover {
  background: #02b9fc;
}
.small,
.big {
  background: #f5f5f5;
  height: 22px;
  padding-left: 4px;
  margin-bottom: 12px;
  border: 1px solid #444;    
}
.small:focus,
.big:focus {
  background: #fff;
  outline: none;
  border: 1px solid #0296cc;
  box-shadow: 0 0 2px 0 #0296cc;
}
.small {
  width: 45.5%;
}
.big {
  width: 98.1%;    
}
.left {
  margin-right: 15px;
}
于 2013-09-18T04:01:57.893 回答
1

这样做很简单：

叫小的：一半

.first {margin-left: 0 !important; clear: left;}
.full {width:100%}
.half {width: 48%;}
.half {float: left; margin-left: 2%;}

<div class="first half">First Name</div>
<div class="half">Last Name input</div>
<div class="full">Email Input</div>

正如你所看到的，我使用 margin % 来制作间距......这就是我制作 48% -2% 的方式（只要它相等，你就可以做任何你喜欢的事情......）。我创建了一个名为.first的类以使事情看起来正确（您可以使用 jquery 创建一个自动类）。

这是一个小提琴：

小提琴那个

希望这对您有所帮助。

于 2013-09-18T03:37:45.263 回答
0

如果你在输入元素上应用 100% 它将溢出 div 框，因为输入元素有一些默认填充，为了完美的解决方案，你应该使用这个：

你的 CSS：

input{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
.clearfix { clear: both; }
.first, .last{ width: 48%; }
.first{ float: left; }
.last{ float: right; }
.email{ width: 100%;}

您的 HTML：

<div class="clearfix">
    <label>Name</label><br>
    <input type="text" class="first">
    <input type="text" class="last">
</div>
<div class="clearfix">
    <label>Email</label><br>
    <input type="text" class="email">
</div>

您可以查看此页面以了解如何将布局与浮动对齐 - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php

于 2013-09-18T05:24:49.057 回答