Question

我的css / html代码有一个小问题，我想把全宽输入放在我的div旁边

我的HTML：

<div class="leftdiv"> </div>
<input type="text" id="title-input" placeholder="nothing"></div>

这是我的css：

.leftdiv {
    height: 60px;
    float: left;
    background-color: aqua;
    width: 60px;
}
#title-input {
    width: 100%;
    height: 60px;
}

我想说leftdiv必须是60px x 60px，所以我不能使用bootstrap的行（或者是？）

Answer 1

Flexbox可以做到这一点：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrap {
  display: flex;
}
.leftdiv {
  height: 60px;
  background-color: aqua;
  width: 60px;
}
#title-input {
  flex: 1;
  height: 60px;
}

<div class="wrap">
  <div class="leftdiv"></div>
  <input type="text" id="title-input" placeholder="nothing" />
</div>

Answer 2

您应该在打开div后立即删除关闭div的</div>标记。这是你唯一的错误。

所以它看起来像那样：

<div class="leftdiv">
  <input type="text" id="title-input" placeholder="nothing">
</div>

https://jsfiddle.net/rsnhvyte/

如何在我的div旁边放一个全宽输入？

2 个答案: