Question

如何强制input text占用其父级（div class="input-wrapper"）的100％宽度，这是响应式的？ Width:inherit使整个viewport广泛，width:auto也不起作用，因为它使输入默认为size="20"。我希望在width中有两个带px的容器，并且输入响应中央容器。看看我的简单的plunker。

HTML：

<div class="one"></div>
<div class="three"></div>
<div class="two">
  <div class="input-wrapper">
    <input type="text" id="square" />
  </div>
</div>

CSS：

input {
  width: auto;
}

.one {
  width: 200px;
  background-color: blue;
  height: 60px;
  float: left;
}

.two {
  background-color: red;
  height: 60px;
  width: auto;
}

.three {
  background-color: yellow;
  height: 60px;
  width: 150px;
  float: right;
}

.input-wrapper {
  width: 100%;
  background-color: green;
}

http://plnkr.co/edit/wtaXo3N4j4hKyeWI0l5i?p=preview

Answer 1

input {
  width: 100%;
  box-sizing: border-box;
}

.one {
  width: 200px;
  background-color: blue;
  height: 60px;
  float: left;
}

.two {
  background-color: red;
  height: 60px;
  width: auto;
}

.three {
  background-color: yellow;
  height: 60px;
  width: 150px;
  float: right;
}

.input-wrapper {
  background-color: green;
  position: relative;
  margin-left: 200px;
  margin-right: 150px;
}

Answer 2

同时添加

.input-wrapper {
    position:relative;
}
input {
    width:100%;
}

100％宽度取自第一个非静态父级。在您的示例中 - 它是body。

<强> UPD

input {
    width: 100%;
    padding:0px;
    border:0px;
    outline:0px;
    margin:0px;
    box-sizing:none;
}

.input-wrapper {
    width: auto;
    background-color: green;
    position:relative;
    margin-left:200px;
    margin-right:150px;
}

Answer 3

这是解决方案

<强> HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="one"></div>
    <div class="three"></div>
    <div class="two">
      <div class="input-wrapper">
        <input type="text" id="square" style="width:98%"/>
      </div>
    </div>
  </body>

</html>

<强> CSS

/* Styles go here */

input {
  width: auto;
}

.one {
  width: 33%;
  background-color: blue;
  height: 60px;
  float: left;
}

.two {
  background-color: red;
  height: 60px;
  width: 34%;
  float: left;
}

.three {
  background-color: yellow;
  height: 60px;
  width: 33%;
  float: right;
}

.input-wrapper {
  width: 100%;
  background-color: green;
}

Answer 4

你应该使用flex：

HTML：

<div class="wrapper">
    <div class="one"></div>
    <div class="three"></div>
    <div class="two">
      <div class="input-wrapper">
        <input type="text" id="square" />
      </div>
    </div>
</div>

CSS：

.wrapper {
    display:-webkit-flex;
    display:flex;
}

input {
  width: auto;
}

.one {
  width: 200px;
  background-color: blue;
  height: 60px;
  flex-grow: 0;
}

.two {
  background-color: red;
  height: 60px;
  width: 150px;
  flex-grow: 1;
}

.three {
  background-color: yellow;
  height: 60px;
  flex-grow: 0;
}

.input-wrapper {
  width: 100%;
  background-color: green;
}

你也可以玩方向。我希望它有所帮助

Answer 5

简单快捷的答案？使用“最小宽度”代替“宽度”。

现在我正面临着同样的问题，这为我解决了这个问题。

我的代码示例：

<input type="text" name="CommentText" placeholder="Write comment here..."
               style="min-width:100%; height:100px"/>

如何强制输入文本以获取其父级的100％宽度

5 个答案: