Html 我如何在CSS中指定一个按钮应该只占其文本的宽度？

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

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

如果您将

#nextButton

更改为

显示：内联块

，并允许

流体

为

宽度：100%

，我认为这可能接近您的结果 你在找什么

例如：

---

编辑：我刚刚又浏览了一下您的代码，注意到您正在覆盖display属性。不确定这是否用于调试目的。另一个建议是将

#halo

和

#skull

选择器组合起来。由于它们使用相同的CSS声明，这将使样式表变得更短、更清晰：）

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

#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;
}