如何在 CSS 中指定按钮只占用与其文本一样多的宽度？答案

【问题标题】：How do I specify in CSS that a button should only take up as much width as its text?如何在 CSS 中指定按钮只占用与其文本一样多的宽度？
【发布时间】：2018-02-05 20:23:40
【问题描述】：

我有四个元素想要占据父 DIV 中可用宽度的 100%——一个图像、一个 jQuery UI 滑块、另一个图像和一个按钮。

<div id="sliderScaleDiv">
<div id="halo">
            <img width="75" src="http://www.clker.com/cliparts/n/c/1/B/r/q/angel-halo-with-wings.svg" alt="Angel halo" />
        </div>

    <div class="fluid">                                <div class="slider"></div>
                        </div>

        <div id="skull">
            <img width="75" src="https://temporarytattoos.com/pub/media/catalog/product/cache/image/700x560/e9c3970ab036de70892d86c6d221abfe/s/k/skull-and-crossbones-temporary-tattoos_1601.jpg" alt="Skull" />
        </div>

<form class="voteForm" id="new_vote" action="/votes" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="Yp7vN3kTCg2brdU3/yHknGxnE3I6V8xA/C3+zj4lbVN7qRS+pWWS/V4UPawx/gngJBkEpWGTZSMltOkSQuUfdw==">
            <input value="23" type="hidden" name="vote[person_id]" id="vote_person_id">
            <input type="hidden" name="vote[score]" id="vote_score">
            <button name="next" type="button" id="nextButton" class="btn-feedback">Skip</button>
</form>    

    </div>

唯一我想要可变宽度的项目是滑块（尽可能多地占用空间）。如果不对按钮的像素值进行硬编码，我如何在 CSS 中指定我希望按钮占用与其文本占用的宽度一样多的宽度，但仅此而已？现在，似乎我的所有项目都被压缩了（至少滑块没有填充剩余空间），我认为这是因为我没有为按钮指定某种宽度 CSS 元素——http://jsfiddle.net/u72596ta/8/。

四个元素我使用的样式是

#halo {
  position: relative;
  z-index: 20;
  vertical-align: top;
  display: inline-block;
  width: 75px;
  display: table-cell;
}

.fluid {
  display: table-cell;
}

#skull {
  position: relative;
  z-index: 20;
  vertical-align: top;
  display: inline-block;
  width: 75px;
  display: table-cell;
}

#nextButton {
    display: inline-block;
    display: table-cell;
}

【问题讨论】：

您自相矛盾：您是希望每个按钮的宽度不超过其文本，还是希望 4 个按钮占据一行的全部宽度，无论行的宽度如何？
我希望所有四个项目都占据文本的 100%，但只有第二个项目——滑块应该是灵活的（它应该占据尽可能多的空间）。按钮应该只占用与文本一样多的空间。这有意义吗？
是的，所以请重新表述您的问题。

标签： html css width jquery-ui-slider

【解决方案1】：

如果您将 #nextButton 更改为 display: inline-block 并允许您的 .fluid 为 width: 100% 我认为这可能接近您的结果正在寻找。

示例：http://jsfiddle.net/u72596ta/10/

编辑：我又看了一眼您的代码，发现您正在覆盖 display 属性。不确定这是否出于调试目的。另一个建议是结合您的 #halo 和 #skull 选择器。由于它们使用相同的 CSS 声明，这将使您的样式表更短更清晰:)

【讨论】：