Question

如何使用按钮垂直对齐标签元素。

我正在使用此hack使文件按钮看起来像常规引导按钮

Twitter Bootstrap Form File Element Upload Button

问题是按钮不再与常规按钮垂直对齐。（如果我用常规按钮元素替换标签元素，它看起来是正确的，但当然它不起作用。

<div style="padding:0.25em">
    <button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll(&#x27;ARTWORK_TABLE&#x27;);">
        Select All
    </button>
    <button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll(&#x27;ARTWORK_TABLE&#x27;);">
        UnSelect All
    </button>
    <label class="btn btn-outline-secondary">
        Browse
        <input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
    </label>
</div>

Answer 1

使用margin utility class（mt-2）似乎有效..

<div class="container">
    <div style="padding:0.25em">
        <button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
            Select All
        </button>
        <button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
            UnSelect All
        </button>
        <label class="btn btn-outline-secondary mt-2">
            Browse
            <input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
        </label>
    </div>
</div>

https://www.codeply.com/go/kFHG1BDI1E

在Html中如何垂直对齐标签作为按钮与按钮，以便正确对齐

1 个答案: