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

Question

I have four elements that I would like to take up 100% of the width available in the parent DIV -- an image, a jQuery UI slider, another image, and a button.

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

The only item I would like to have a variable width is the slider (take up as much space as possible). Without hard-coding a pixel value for the button, how do I specify in CSS that I want the button to take up as much width as its text occupies but no more? Right now, it seems like all my items are getting compressed (at least the slider is not filling the remaining space) and I think its because I haven't specified some type of width CSS element for the button -- http://jsfiddle.net/u72596ta/8/ .

The styles I've used for the four elements are

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

You are being contradictory: do you want each button to be no wider than its text, or do you want 4 buttons to accupy the full width of a line, whatever the line's widt? — Sébastien, Feb 05 '18 at 20:40
I want all four items to take up 100% of the text, but only the second item -- the slider should be flexible (it shoudl take up as muich space as possible). The button should only take up as much space as the text. Does that make sense? — , Feb 05 '18 at 20:51

David Shack · Accepted Answer · 2018-02-05T21:23:18.110

If you change #nextButton to be display: inline-block and allow your .fluid to be width: 100% I think that might be close to the result you re looking for.

Example: http://jsfiddle.net/u72596ta/10/

EDIT: I also just did another glance over your code and noticed that you're overwriting the display property. Not sure if that's for debugging purposes or not. Another suggestion would be to combine your #halo and #skull selectors. Since they are using the same CSS declarations, it will make your stylesheet shorter and cleaner :)

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

1 Answers1