比例在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

回答

相關問題