Css: Let Input Field Fill The Space Left August 22, 2022 Post a Comment I'm trying to let a label and an input field fill the whole width of a from. Here is my attempt. This is the HTML Username: Solution 1: Use a wrapper element around your input and set overflow: hidden; (Make sure you use a block level element, if you are using span than declare display: block; in your CSS) Demo <label>Blah Blah</label> <div><input type="text" /></div> label { float: left; } div { overflow: hidden; } input[type=text] { width: 100%; } Copy Solution 2: you have to set width attribute properly. Live Demo label { float: left; width: 15%; } input { width: 83%; box-sizing: border-box; } Copy Solution 3: If you firebug it, you will know that Your border is actually putting some padding to the container p. So, if you just put border to none then you will be good to do. If you want to use border and dont want the input to go outside the form, then you need to either shorten the width of the input a little and apply border or you give some padding to your form.Baca JugaSlow Response When The Html Table Is BigHow To Save Html5 Geolocation Data To Python Django Admin?Flex Container Vertical Overflowing Parent Div Try This CSS form { background-color: #D3D3D3; height: 500px; width: 400px; } form p{ float: left; position: relative; width: 100%; } label { float: left; position: relative; width: 100%; } input { border:0; float: left; height: 20px; margin: 0 auto; padding: 0; position: relative; width: 100%; } Copy Here is the DEMO Share You may like these postsHow To Send Html Dynamic Table As Mail In Php?Allowing Access To My Site.css On My Login Form MvcSelecting Nested Div In A Li ElementAngularjs Error: [$compile:tpload] Failed To Load Template Post a Comment for "Css: Let Input Field Fill The Space Left"
Post a Comment for "Css: Let Input Field Fill The Space Left"