float：右边没有正确应用

Question

我有以下HTML：

<p><select id="dynamic_select" name="cars"></select><br>
<input id="Submitgo" type="submit"></p>

和CSS：

select#dynamic_select {width: 45%; max-width: 45%; float:right;}
input#Submitgo {float: right;}

但提交按钮浮动到左侧：

Answer 1

您可以使用display:inline-block

* {
  margin: 0;
  padding: 0
}
p {
  width: 100%;
  font-size: 0;
}
input,
select {
  display: inline-block;
  font-size: 12px;
  vertical-align: top;
}
input {
  width: 100px;
}
select {
  width: calc(100% - 100px)
}

<p>
  <select id="dynamic_select" name="cars"></select>
  <input id="Submitgo" value="submit" type="submit" /> 
</p>