CODEWITHSUNDEEP
htmlcss
AMD
AMD

Reputation: 1268

CSS display inputs in-line (last input width:100%)

I need to create a line with a few inputs and to be sure they always fill the div, I've added width:100% to the last input

<div style="width:300px;background:#eee;height:30px">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <input value="last" style="width:100%" type="button"/>
</div>

This sample is not working fine because the last input width is same as div's and it appears in the second line.

How can I make them all appear in the same line?

Jsfiddle

Upvotes: 6

Views: 29998

Answers (5)

Haroon
Haroon

Reputation: 1

<b
   style={{
          fontFamily: "arch",
          fontSize: 50
              }}>
</b>


<div style={{
                marginTop: 20,
                marginLeft:"280px",
                marginRight:"80px",
                fontSize: 40}}>
</div>

LIke this you can do in JSX

Upvotes: 0

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

If you have N children that you want to render to fit some width, then you need to set their respective widths to 100% / N, which for your example would be 100% / 3 ~33.33333% However, (unless you have box-sizing: border-box/padding-box set) you also need to account for margins, borders and padding. Furthermore, if your elements are display: inline or display: inline-block the whitespace between them in the source will also take up space. You need to counter this whitespace by

  • Removing it
  • Undoing it with margin-right: -0.4em or some value that works
  • float your elements (which actually sets display: block)

I've updated your demo with the quickest solution that gives you your desired result.

Upvotes: 0

Love Trivedi
Love Trivedi

Reputation: 4046

You can Try for fill your div from button

<div style="width:300px;background:#eee;height:30px">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <input value="last" style="width:132px" type="button"/>
</div>

Upvotes: 0

j08691
j08691

Reputation: 207881

With a little CSS you can do this. Wrap the last input in a span and add this CSS:

<div style="width:300px;background:#eee;height:30px;">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <span id="last"><input value="last" style="width:100%" type="button" /></span>
</div>
#last {
    overflow:auto;
    display:block;
}
input {
    float:left;
}

jsFiddle example

Upvotes: 16

user5623896726
user5623896726

Reputation: 136

When you use width: 100%, this fills the div containing the input. The best way to have them all fit inside is the distribute the div width evenly between the inputs, and float them so they all sit next to each other.

<div style="width:300px;background:#eee;height:30px">
<input value="first" style="width:100px, float: left;" type="button"/>
<input value="second" style="width:100px" type="button"/>
<input value="last" style="width:100px, float: right;" type="button"/>
</div>

The syntax might not be exactly right, I rarely use in-line CSS, much better off just giving the inputs and class and then assigning the class with attributes in your .css file.

Upvotes: 1

Related Questions