Question

我使用水平引导程序形式，需要<input>绝对定位，原因太无聊无法解释。然而，我正在努力使它获得与之前绝对相同的宽度。因此，在链接示例中，我希望密码字段与电子邮件字段的宽度相同。

<form class="form-horizontal" style="max-width: 400px">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10"> 
      <input type="password" class="form-control abs" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

CSS：

.abs {
  position: absolute;
  width: inherit; /* 100%; */
}

任何人都可以帮我解决这个小提琴吗？希望这很容易实现而不会弄乱：

jsFiddle

Answer 1

有一种方法可以做到这一点，虽然它确实需要几个div。我们的想法是不将position: absolute属性应用于输入元素本身，而是应用于与表单具有相同结构的容器。这样，我们可以确定它们将始终共享相同的大小。

.password-container {
  width: 100%;
  position: absolute;
  padding-left: 15px;
}
.password-container > .form-horizontal {
  max-width: 400px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" style="max-width: 400px">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="password-container">
      <div class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-10 col-md-offset-2"> 
            <input type="password" class="form-control abs" id="pwd" placeholder="Enter password">
          </div>
        <div>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

因为它只使用divs语义不受影响。

Answer 2

使用Louis＆＃39;回答作为灵感，我想我能够简化这一点。

.abs-container {
  position: absolute;
  width: 100%;
  padding-right: 30px;
}

无论表格的宽度如何，似乎都能正常工作。

https://jsfiddle.net/8aco78L7/4/

Answer 3

.col-sm-10 {
  position: relative;
}

input {
  max-width: 400px;
}

.abs {
  position: absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" style="max-width: 400px">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control abs" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

在水平形式上进行自举输入绝对定位而不影响宽度？

3 个答案: