比例在CSS overlaping

我有我的网站上一个问题，我想使底部文本框和提交按钮，我已经被风格像这样比例在CSS overlaping

#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

来源

2016-10-25 Nicholas Hendricks

欢迎。 Jsfiddle请。另请参阅[mcve] –

您能帮我吗 –

我需要您按照我以前的评论中的说明来帮助。 –

您可以使用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>

来源

2016-10-26 06:30:40 LinkinTED

比例在CSS overlaping

回答

相关问题