在此特定示例中，如何使跨度覆盖div的整个宽度？

Question

搜索堆栈溢出/谷歌几个小时后，我一直在努力解决此问题...

在不使用display：inline-block的情况下，我似乎无法获得该跨度来覆盖其父div的整个宽度，但是当我使用它时，它看起来就像在一个div上，不再是in-线？如我链接的图像所示，它会切断分隔条。

如何使该跨度保持内联，覆盖div的整个宽度，而不切断分隔栏？

我很抱歉可能是非常草率的HTML / CSS

.chatroom {
  width: 90vw;
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;

  border: 2px solid white;
  border-radius: 30px;
  background-color: white;
  opacity:.8;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction: column;

}
.input {
  height: 40px;
  width: 98%;
  margin-left:1%;
  margin-top: auto;
}

.form-control{
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

#chat{
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  float: right;
  height:100%;
  width: 75%;
  display: flex;
  flex-direction: column;
}
#channels{
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: white;
  width:25%;
  float: left;
  height:100%;
  overflow-y: hidden;
}
#bar{
  background-color:black;
  height:100%;
  float: right;
  width: 3px;
}
#contain{
  height:100%;
}
.channel{
  text-indent: 30%;
  font-size:20px;
  width:100%;
  background-color: rgba(193, 66, 66, 0.23);
  display:inline-block;
}

<div class="chatroom">
  <div id="contain">
    <div id="channels">
      <span class="channel">General</span>
        <div id="bar"></div>
    </div>
    <div id="chat">
      <ul id="messages">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
      </ul>
      <div class="input">
        <form>
            <div class="form-group">
              <input type="text" id="m" class="form-control" autocomplete="off">
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以在跨度上使用float: left（并删除display:inline-block）。另外，将跨度的宽度设置为width:calc(100% - 3px) （我们删除了条形图的3px）。

但是，我不知道您想做什么，但是使用表格也许更好？

.chatroom {
  width: 90vw;
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;

  border: 2px solid white;
  border-radius: 30px;
  background-color: white;
  opacity:.8;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction: column;

}
.input {
  height: 40px;
  width: 98%;
  margin-left:1%;
  margin-top: auto;
}

.form-control{
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

#chat{
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  float: right;
  height:100%;
  width: 75%;
  display: flex;
  flex-direction: column;
}
#channels{
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: white;
  width:25%;
  float: left;
  height:100%;
  overflow-y: hidden;
}
#bar{
  background-color:black;
  height:100%;
  float: right;
  width: 3px;
}
#contain{
  height:100%;
}
.channel{
  text-indent: 30%;
  font-size:20px;
  width:calc(100% - 3px);
  background-color: rgba(193, 66, 66, 0.23);
  float: left;
}

<div class="chatroom">
  <div id="contain">
    <div id="channels">
      <span class="channel">General</span>
        <div id="bar"></div>
    </div>
    <div id="chat">
      <ul id="messages">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
      </ul>
      <div class="input">
        <form>
            <div class="form-group">
              <input type="text" id="m" class="form-control" autocomplete="off">
        </form>
      </div>
    </div>
  </div>
</div>