Question

我有四个元素，我想占用父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;
}

Answer 1

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

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

编辑：我还对你的代码再看一眼，发现你正在覆盖显示属性。不确定这是否用于调试目的。另一个建议是合并您的#halo和#skull选择器。由于它们使用相同的CSS声明，因此它会使样式表更简洁，更清晰：）

如何在CSS中指定按钮应该只占用文本的宽度？

1 个答案: