Input box 100% width, with label to the left

后端 未结 2 1333
无人共我
无人共我 2021-02-06 05:48

I\'m trying to have a fluid input box with 100% width, while having the label floated to the left. Here\'s what I currently have:

.left {
  float: left;
}

inpu         


        
相关标签:
2条回答
  • 2021-02-06 06:29

    See: http://jsfiddle.net/r2769/ (resize the window)

    CSS:

    .left {
        float: left;
    }
    
    .left2 {
        overflow: hidden;
        display: block;
        padding: 0 4px 0 10px
    }
    .left2 input {
        width: 100%
    }
    

    HTML:

    <form>
        <label class="left" for="name">Name:</label>
        <span class="left2"><input id="name" name="name" /></span>
    </form>
    

    An explanation of the method is here.

    0 讨论(0)
  • 2021-02-06 06:40

    I recently found out about calc in css:

    width: calc(100% - 100px);
    

    this can be used to solve this problem: jsfiddle here

    HTML:

    <div class="setting">
        label
        <input class="s2"/>
    </div>
    

    CSS:

    .setting {
        position: relative;
        width: 100%;
    }
    .setting .s2 {
        position: absolute;
        left: 180px;
        width: calc(100% - 184px);
    }
    
    0 讨论(0)
提交回复
热议问题