HTML和CSS水平調整

我正在網頁中構建一個聊天功能，我在設計提交字段時遇到了麻煩。我會爲您提供一張我的目標圖片，以及目前格式的代碼。HTML和CSS水平調整

這裏是HTML代碼：

<div class="submitField"> 
    <textarea class="submitArea" form="usrform"> </textarea> 
    <form action="" id="usrform"> 
    <input type="submit" class="submitBtn"> 
    </form> 
    </div>

而且CSS代碼：

.submitField { 
    position: fixed; 
    bottom: auto; 
    width: 100%; 
    padding: 10px; 
    background-color: red; 
     display: inline-block; 
} 



.submitArea { 
    width: 50vh; 
    height: 8vh; 
    padding: 5px 5px; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 4px; 
    background-color: #f8f8f8; 
    font-size: 16px; 
    resize: none; 
    color: black; 
     position: relative; 
} 

.submitBtn { 
    color: black; 
}

我知道使用的一切類可能不是最優的，但還有什麼我做錯了正確的現在？提示我需要更改以獲得新的外觀？

來源

2017-04-20 Hangfish

給按鈕position:absolute;，然後給它一個left: 50px;和right: 50px;

來源

2017-04-20 12:50:01

我需要做的比留下50px的多一點;和右：50px;但你讓我走上正軌，謝謝！ – Hangfish

我知道我不想計算它我只是想幫你:) –

嘗試

.submitField { 
    position: fixed; 
    bottom: auto; 
    width: 100%; 
    padding: 10px; 
    background-color: red; 
    display: flex; 
} 



#usrform { 
    width: 15%; 
    display: inline-block; 
    align-self: center; 
} 



.submitBtn { 
    color: black; 
    display: block; 
    margin: 0 auto; 
}

來源

2017-04-20 13:18:29

HTML和CSS水平調整

回答

相關問題