如何让文本框侧面的按钮始终完美对齐？

Question

您好，如果这个问题太基础了，我很抱歉，但我已经研究了一段时间，但收效甚微。另外，我已经尝试过类似问题的建议（这就是我走到这一步的方式），但仍然不够好。

基本上我有一个包含很多文本字段的表单，每个文本字段都有自己的修饰符按钮。例如：

这里是一个稍微偏斜的样本：

我需要侧面的按钮始终完美对齐，就像这张照片中一样。也就是说，我尝试过的每个浏览器都以不同的方式显示它，chrome 要么向上推要么向下推，firefox 有时会正确显示它，但当页面放大时它会移动。我注意到，当我将 chrome 缩放到 90% 时，按钮会正确排列。

这是 HTML（和 rails）的示例：

<div style="float:left; padding:10px;">
  <%= select_tag :noteMod, options_for_select([["AND"],["EXCEPT"],["OR"]], :selected => params[:noteMod]), class: "squareDropdown" %>
  <%= text_field_tag :note , params[:note], placeholder: "Note", class: "textArea" %>
</div>

CSS

 .squareDropdown{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow:'';


    width: 20px; 

    text-indent: 0.01px; 
    text-overflow: ""; 

    font-family: Arial, Sans-Serif;
    font-size:14px;
    background: #bfa75e;
    color:white;
    float:left;
    position:relative;

    height: 22px;
    line-height: 22px;

}

有没有人知道我可以做些什么来获得更准确的结果？

Answer 1

两个简单的选项：1) 相对定位容器 DIV，绝对定位内容。使用 top/left/right/width/height 定位内容。或者 2) 使用您的浏览器开发工具并不断调整 CSS（框大小、边距、填充、边框等，确保明确设置所有值）。

Answer 2

尝试使用 flexbox 定位您的 div 及其内容。在这里你有非常好的和直接的指南如何使用它： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

对于您的情况，代码可以如下所示：

<div style="float:left; padding:10px;" class: "container">
  <%= select_tag :noteMod, options_for_select([["AND"],["EXCEPT"],["OR"]], :selected => params[:noteMod]), class: "squareDropdown" %>
  <%= text_field_tag :note , params[:note], placeholder: "Note", class: "textArea" %>
</div>

.container {
  display: flex; 
  flex-direction: row;
}

剩下的工作是使用适当的属性定位您的项目（例如 justify-content 用于容器，或 flex-shrink/ flex-grow 用于内部项目）

Answer 3

fieldset.search {
 border: none;
 width: 243px;
 margin: 0 auto;
 background: #222;
}
.search input, .search button {
 border: none;
 float: left;
}
.search input.box {
 color: #fff;
 font-size: 1.6em;
 width: 190px;
 height: 30px;
 padding: 8px 5px 0;
 background: #616161 url(search_bg.gif) no-repeat;

}
.search input.box:focus {
 background: #616161 url(search_bg.gif) no-repeat left -38px;
 outline: none;
}
.search button.btn {
 width: 38px;
 height: 38px;
 cursor: pointer;
 text-indent: -9999px;
 background: #fbc900 url(search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
 background: #fbc900 url(search_bg.gif) no-repeat bottom right;
}

<form method="get" id="searchform" action="#">
<fieldset class="search">
    
 <button class="btn" title="Submit Search">Search</button>
 <input type="text" class="box" />

</fieldset>
</form>

如何让文本框侧面的按钮始终完美对齐？

How can I get a button on the side of a text box to be perfectly aligned all the time?

html

css

google-chrome

ruby-on-rails

cross-browser