Как лучше всего поместить кнопку рядом с полем выбора с CSS?

Question

У меня есть button рядом с select, и я также добавил топ margin, но хотел посмотреть, есть ли лучший способ справиться с тем, чего я пытаюсь достичь.

Пожалуйста, обратитесь к снимку экрана ниже.

Вот 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

В итоге проблема заключалась в том, что метка, которую плагин Struts 2 Bootstrap находился в процессе, выравнивала кнопку к вершине метки вместо поля ввода. Вот решение, которое я придумал, если кто-нибудь столкнется с этим с плагином. Такого рода запутанные вещи немного напоминают мои первоначальные вопросы, потому что я в действительности не осознавал этого в то время.

Метка должна быть опущена в поле выбора или ввода Struts и перемещена в верхнюю часть вне поля входная группа, чтобы заставить это работать. Я также приложил еще один снимок экрана этой реализации.

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>

Answer 2

Лучший способ - использовать input-group, как упомянуто здесь в Bootstrap DO C

<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 3

"Существует множество способов сделать что-либо:"

Это решение от Bootstrap:

Нажмите, чтобы увидеть пример

<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

Используйте flexbox:

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