html - css 中的比例重叠

Question

我在我的网站上遇到问题我正在尝试将我的底部文本框和提交按钮设置为这样的样式

#chat-box-div-submit{
position:fixed;
bottom:5;
right:5px;
margin:10px;
height:30px;
background:darkcyan;
width:70px;
outline: none;
}
#chat-box-div-txtinpt{
width:65%;
left:305px;
min-width:100px;
position:fixed;
bottom:5;
margin:10px;
outline-color: darkcyan;
}
.submit{
background:darkcyan;
border:0;
border-radius:4px;
}
.big-txtinpt{
height:30px;
background: transparent;
border-radius:4px;
border:2px solid darkcyan;
color:darkcyan;
}

我把它带到了在某些计算机上看起来非常漂亮的地方(提交按钮就在文本框旁边，中间没有像素)但是它会重叠或散布在其他人身上有人可以帮助我吗 here is the site这是一个fiddle

Answer 1

你可以为此使用 flexbox:

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  background: rgb(28, 28, 29);
  margin: 2em;
}
#chatbox {
  width: 100%;
  display: flex;
  height: 2em;
}
#chatbox input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 2px solid darkcyan;
}
#chatbox input[type=text] {
  color: darkcyan;
  border-radius: 4px 0 0 4px;
}
#chatbox input[type=submit] {
  width: 70px;
  background: darkcyan;
  border-radius: 0 4px 4px 0;
}

<div id="chatbox">
  <input type="text" />
  <input type="submit" value="Send" />
</div>