使用 CSS 将按钮浮动到 select 框旁边的最佳方法是什么？

Question

我有 button 浮动在 select 旁边，并且还添加了顶部 margin 但想看看是否有更好的方法来处理我的问题我正在努力实现。

Please reference the screen shot below.

这里是 html 我是如何做到的。有没有比使用 margin top 更好的方法来实现这一点？有人进行了更改，它破坏了我的 32px margin。

我在这里浏览过类似的帖子，但似乎无法让这个按钮与之前帖子中给出的解决方案正确对齐。

谢谢。

 <div class="input-group">
        <s:select list="dnldrepoEmpGroupList" listKey="dnldrepoEmpGroupNo" listValue="folderName" name="entity.dnldrepoEmpGroup.dnldrepoEmpGroupNo" requiredLabel="true" label="Grouping" headerValue="--Select One--" headerKey="" />
        <span class="input-group-btn">
          <button name="addGroupingName" type="button" class="btn btn-primary" style="margin-top:32px;">Add</button>
        </span>
    </div>

这是所有html

<div id="ajaxResult">
<div id="downloadResult">
    <div id="actionMessage">
        <s:actionmessage cssClass="actionMessage" />
        <s:actionerror cssClass="actionMessage ui-state-error" />
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4" id="downloadTableResult">
        <s:hidden name="entity.dnldrepoNo" />
        <s:hidden name="entity.dwnldrepoType" />
        <s:hidden name="entity.uploadUser.userNo" />
        <s:hidden name="entity.dwnldrepoUploaddt"  />
        <s:set var="downloadType"
                       value="#{'Employer Download':'Employer Download', 'Temp Download':'Temp Download'}" />
        <s:textfield name="entity.dwnldrepoDisplayname"
                                 label="Display Name"
                                 requiredLabel="true"/>
        <s:if test="%{entity.dwnldrepoType == 'Temp Download'}">
            <s:textarea name="entity.dnldrepolookups"
                                    label="Email"
                                    requiredLabel="true"/>
        </s:if>
        <s:if test="%{entity.dwnldrepoType == 'Employer Download'}">
            <s:textfield data-display="%{entity.dnldrepoEmpGroup.employer.employerName}"  name="entity.dnldrepoEmpGroup.employer.employerNo" id="clientKeyAutoComplete" label="Employer" />
            <div class="input-group">
                <s:select list="dnldrepoEmpGroupList" listKey="dnldrepoEmpGroupNo" listValue="folderName" name="entity.dnldrepoEmpGroup.dnldrepoEmpGroupNo" requiredLabel="true" label="Grouping" headerValue="--Select One--" headerKey="" />
                <div class="input-group-append">
                    <button name="addGroupingName" type="button" class="btn btn-outline-secondary">Add</button>
                </div>
            </div>
        </s:if>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 rowData">
        <div class="text-danger">
            <s:property value="%{entity.dwnldrepoPointer}" />
        </div>
        <s:hidden name="entity.dwnldrepoPointer" />
        <s:file name="entity.planFile" label="File Upload" />
        <s:textfield name="entity.dwnldrepoRetain"
                                   label="Retain Hours"
                                   requiredLabel="true"
                                   helpText="Enter 0 hours to retain forever"/>
    </div>
</div>

这是我使用 Flexbox 解决方案以及 Bootstrap 4 文档中的解决方案时发生的情况。

此外，请注意，我们在此项目中使用 Struts，这些 Struts 输入产生以下内容，我怀疑这可能是我无法将解决方案发布到的原因工作。这是呈现文档时 Struts 生成的内容的片段。

<div class="form-group ">
    <label class=" control-label" for="entity_dnldrepoEmpGroup_dnldrepoEmpGroupNo">Grouping            

        <i class="fa fa-asterisk required" aria-hidden="true"></i>
    </label>
    <div class=" controls">
        <select name="entity.dnldrepoEmpGroup.dnldrepoEmpGroupNo" id="entity_dnldrepoEmpGroup_dnldrepoEmpGroupNo" class="form-control">
            <option value="">--Select One--</option>
        </select>
    </div>
</div>

这是我刚刚截取的屏幕截图，显示添加按钮似乎与标签的顶部对齐。这就是为什么我最初用 margin-top 将它向下推，但想知道是否有更好的解决方案来解决这种疯狂的问题，以对齐到输入字段的顶部。

Answer 1

Best way is use input-group like mention here in Bootstrap DOC

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Answer 2

使用弹性框：

.input-group{
    display: flex;
    max-width: 60%;
    margin: 2em;
}

.input-group input{
    flex: 1 1 auto;
}

.input-group button{
    border-radius: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
    <input type="text" />
    <span class="input-group-btn">
        <button name="addGroupingName" type="button" class="btn btn-primary">Add</button>
    </span>
</div>

Answer 3

"There could be many ways to do a thing:"

此解决方案来自Bootstrap：

Click to see Example

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Answer 4

问题最终出在 Struts 2 Bootstrap 插件正在渲染的标签上，它将按钮与标签顶部而不是输入字段对齐。如果有人遇到这个插件，这是我想出的解决方案。这种事情让我原来的问题有点复杂，因为我当时并没有真正意识到这一点。

标签需要从 Struts select 或输入字段中省略，并移至输入组之外的顶部才能正常工作。我还附上了此实现的另一个屏幕截图。

Struts 2 Twitter Bootstrap 插件 - http://struts.jgeppert.com/struts2-bootstrap-showcase/advanced.action

我想补充一点，如果不是针对这种特殊情况，此线程中提供的答案应该是正确的。谢谢大家对我的问题的贡献。

                      <label>Grouping</label>

                        <div class="input-group">
                            <s:select list="dnldrepoEmpGroupList" listKey="dnldrepoEmpGroupNo" listValue="folderName" name="entity.dnldrepoEmpGroup.dnldrepoEmpGroupNo" requiredLabel="true" headerValue="--Select One--" headerKey="" />
                            <span class="input-group-btn">
                                <button name="addGroupingName" type="button" class="btn btn-primary">Add</button>
                            </span>
                        </div>

使用 CSS 将按钮浮动到 select 框旁边的最佳方法是什么？

What is the best way to float a button next to a select box with CSS?

html

css

struts2

twitter-bootstrap