我如何在 CSS 中指定按钮的宽度应与其文本一样多？

Question

我有四个元素，我想占据父级可用宽度的 100% DIV -- 一个图像，一个 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>

我唯一想要可变宽度的项目是滑块（尽可能多 space）。如果不对按钮的像素值进行硬编码，我如何在 CSS 中指定我希望按钮占用与其文本占用的宽度一样多但不多？现在，似乎我所有的项目都被压缩了（至少滑块没有填充剩余的 space），我认为这是因为我没有为按钮——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;
}

Answer 1

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

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

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

我如何在 CSS 中指定按钮的宽度应与其文本一样多？

How do I specify in CSS that a button should only take up as much width as its text?

html

css

width

jquery-ui-slider