Question

我有nner和外部div。

通常父div包装子div但在我的情况下，child div的宽度与父级相同。

我希望inner-container宽度与输入相同而不是外容器这是一个很好理解的例子

＆＃13;

.outer-container{
    width: 60%;
    margin: auto;
    background-color: white;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
    text-align: center;
    margin-top: 40px;
    min-height: 200px;
}

.innercontainer {
    background-color: #f3f3f3;
}

＆＃13;

<div class ="outer-container">
  <div class=" innercontainer">
    <div>
     Last name: <input type="text" name="lname"><br>
    </div>
  </div>
</div>

＆＃13;

Answer 1

尝试将display:inline-block分配给innercontainer元素。试试这段代码。

.innercontainer {
  background-color: #f3f3f3;
  display: inline-block;
}

Answer 2

您只需将其添加到.innercontainer：

display: inline-block;

https://codepen.io/amitozdeol/pen/LrbvBo

Answer 3

你可以这样使用display:inline-block;：

.outer-container {
  width: 60%;
  margin: auto;
  background-color: white;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 40px;
  min-height: 200px;
}

.innercontainer {
  background-color: #f3f3f3;
  display:inline-block;
}

<div class="outer-container">
  <div class=" innercontainer">
    <div>
      Last name: <input type="text" name="lname"><br>
    </div>
  </div>
</div>

父母不要包装儿童div

3 个答案: