Html 如何使文本框侧面的按钮始终保持完全对齐？

嗨，对不起，如果这个问题太基本了，但是我已经做了一段时间了，效果有限。此外，我也尝试过类似问题的建议（这就是我如何走到这一步的原因），但仍然不够好

基本上我有一个表单，它有很多文本字段，每个字段都有自己的修改器按钮。例如：

下面是一个稍微倾斜的示例：

我需要侧边的按钮完全对齐，就像这张照片中的一样，一直如此。也就是说，我试过的每一款浏览器都会以不同的方式显示它，chrome会向上推或向下推，firefox有时会正确地显示它，但当页面放大时，它会移动。我注意到，当我在chrome上将缩放比例调到90%时，按钮会正确对齐

以下是HTML（和rails）的示例：

---

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

两个简单的选项：1）将容器DIV定位为相对位置，将内容定位为绝对位置。使用顶部/左侧/右侧/宽度/高度定位内容。或者2）使用浏览器开发工具，不断调整CSS（框大小、边距、填充、边框等，确保明确设置所有值）。

尝试使用flexbox定位您的

div

及其内容。在这里，您有一个非常好且简单的使用指南：

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

<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;
}

参数[：noteMod]），类：“squareDropdown”%>
.集装箱{
显示器：flex；
弯曲方向：行；
}

剩下的工作是使用适当的属性定位您的项目（例如容器的

justify content

，或内部项目的

flex-shrink

/

flex-grow

）

fieldset.search{
边界：无；
宽度：243px；
保证金：0自动；
背景：#222；
}
.搜索输入，.搜索按钮{
边界：无；
浮动：左；
}
.搜索输入框{
颜色：#fff；
字号：1.6em；
宽度：190px；
高度：30px；
填充：8px 5px 0；
背景：#616161 url（search_bg.gif）不重复；
}
.搜索输入。框：焦点{
背景：#616161 url（search_bg.gif）无重复左-38px；
大纲：无；
}
.search button.btn{
宽度：38px；
高度：38px；
光标：指针；
文本缩进：-9999px；
背景：#fbc900 url（search_bg.gif）右上角无重复；
}
.search按钮。btn:悬停{
背景：#fbc900 url（search_bg.gif）右下角无重复；
}

搜寻

谢谢，我在这方面运气不太好，因为chrome中的高度仍然稍有偏差。我正在使用.container{display:flex；flex direction:row；justify content:flex start；align items:center；}谢谢，在浏览器中调整是个好主意！我最后添加了样式：“margin:0 auto；“到包含div的所有部分。

 .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;

}   

<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;
}