Question

我尝试进行HTML聊天但是当我尝试在文本字段旁边放置一个提交按钮时，按钮位置始终是文本字段位置下方的几个像素。

<center>
<input name="msg" id="inputField" type="text">
<button id="submitBtn" onclick="javascript:sendChatMsg" value="Send">
     Send
</button>
</center>

样式表：

#inputField{
width:830;
height:50;
font-size:20px;
color:#FFFFFF;
background-color:#000000;
border-width:1px;
border-style:solid;
border-color:#FFFFFF;
margin-top:5px
    }
#submitBtn{
background-color:#000000;
border-width:1px;
border-style:solid;
border-color:#FFFFFF;
color:#FFFFFF;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
box-sizing: border-box;
margin-top:9px;
height:50px;
width:100px;
text-align:center;
    }

Answer 1

添加到您的文字字段

vertical-align: top;

Answer 2

尝试添加inputField demo

webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align:bottom;

<强> CSS

#inputField{
  border: none;
  outline:none;
width:830;
height:50px;
font-size:20px;
color:#FFFFFF;
background-color:#000000;
border-width:1px;
border-style:solid;
border-color:#FFFFFF;
margin-top:5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align:bottom;
    }

或更改vertical-align:bottom; end dell vertical-align:top; margin-top: 5px;

中的margin-top:9px;

Answer 3

高度和宽度有数字但没有单位：

width:830;
height:50;

更改为：

width:830px;
height:50px;

HTML按钮＆amp;文本域

3 个答案: