HTML:文本框和选择下拉列表不水平

Question

我已经搞砸了一段时间了，我根本无法让下拉菜单与文本框保持一致!我一直在更改填充、边距、边框、高度和我能想到的所有内容，以使其在顶部和底部都保持水平。

有什么问题吗？

.metricDateTextbox {
  width: 130px;
  padding: 11px;
  border: 1px solid white;
  color: transparent;
  text-shadow: 0 0 0 black;
  font-family: Verdana;
  font-weight: 500;
  background: #fff center right 10px no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAAjUlEQVR42rTTQQ6DIBBG4XcuOZlIMHri2gtMN2OKBAt05E/YsPheDBG+84DDPqfWZRsgwNsYcWqImgDseiHGiAOOzNoB5uzyn0gJF7W5ixyNkSqePnJvZGrFa5GpA/e1T14aInf40vpovyJmvBZ5PYGfCwUsP8H664eR+LlYwFceXhqJDFrsxkVk6PkMALMhvwVPjvl/AAAAAElFTkSuQmCC);
  background-size: 12px 8px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
 ::-webkit-input-placeholder {
  color: grey;
  font-weight: 500;
  font-family: Verdana;
}
.dwmViewSelect {
  width: 80px;
  height: 40px;
  top: -10px;
  font-weight: bold;
  border: 1px solid white;
  margin: auto;
  padding-top: unset 50px;
}
.showDateBtn {
  width: auto;
  padding: 10px;
  text-align: center;
}

<form method="post" action="" name="form">
  <div class="reportDateDiv">

    <a class="blackColor fSize18">Reporting Period</a>

    <input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString(" MMM d, yyyy ")" readonly="readonly" />

    <a class="blackColor fSize16">to</a>

    <input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString(" MMM d, yyyy ")" readonly="readonly" />

    <select name="hAxisType" class="dwmViewSelect">
      <option selected=@(Request.Form[ "hAxisType"]=="1" ) value="1">Daily</option>
      <option selected=@(Request.Form[ "hAxisType"]=="2" ) value="2">Weekly</option>
      <option selected=@(Request.Form[ "hAxisType"]=="3" ) value="3">Monthly</option>
    </select>

    <input type="submit" value="Show" class="showDateBtn" />
  </div>
</form>

也请参阅此 fiddle !

https://jsfiddle.net/g6Ledf00/1/

Answer 1

选择元素是一个inline-block元素，设置vertical-aling:top会将元素对齐到顶部，

这里有一些 documentation

fiddle

.dwmViewSelect {
 width: 80px;
 height: 40px;
 top: -10px;
 font-weight: bold;
 border: 1px solid white ;
 margin: auto;
 padding-top:unset 50px;
 vertical-align: top;
}