จัดรูปแบบองค์ประกอบอินพุตเพื่อเติมความกว้างที่เหลือของคอนเทนเนอร์

สมมติว่าฉันมีตัวอย่าง HTML แบบนี้:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

นี่ไม่ใช่รหัสที่แน่นอนของฉัน แต่สิ่งสำคัญคือมีป้ายกำกับและป้อนข้อความในบรรทัดเดียวกันในคอนเทนเนอร์ที่มีความกว้างคงที่ ฉันจะจัดรูปแบบอินพุตให้เติมความกว้างที่เหลือของภาชนะโดยไม่ต้องห่อและไม่ทราบขนาดของฉลากได้อย่างไร

เท่าที่ทุกคนเกลียดตารางสำหรับการจัดวางพวกเขาช่วยอะไรแบบนี้ไม่ว่าจะใช้แท็กตารางที่ชัดเจนหรือใช้การแสดง: table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

นี่เป็นวิธีที่ง่ายและสะอาดโดยไม่ต้องใช้ JavaScript หรือการแฮ็กเค้าโครงตาราง มันคล้ายกับคำตอบนี้: ป้อนข้อความความกว้างอัตโนมัติเติม 100% กับองค์ประกอบอื่น ๆ ที่ลอยอยู่

display:blockมันเป็นสิ่งสำคัญที่จะตัดช่องใส่กับช่วงซึ่งเป็น สิ่งต่อไปคือปุ่มต้องมาก่อนและฟิลด์อินพุตที่สอง

จากนั้นคุณสามารถลอยปุ่มไปทางขวาและช่องป้อนข้อมูลเติมพื้นที่ที่เหลือ

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

ซอง่าย ๆ : http://jsfiddle.net/v7YTT/90/

อัปเดตที่ 1:หากเว็บไซต์ของคุณมีเป้าหมายต่อเบราว์เซอร์ที่ทันสมัยเท่านั้นฉันขอแนะนำให้ใช้กล่องที่มีความยืดหยุ่น นี่คุณสามารถเห็นในปัจจุบันการสนับสนุน

อัปเดต 2:สิ่งนี้สามารถใช้งานได้กับหลายปุ่มหรือองค์ประกอบอื่น ๆ ที่ใช้งานร่วมกันอย่างสมบูรณ์กับช่องป้อนข้อมูล นี่คือตัวอย่าง

ฉันแนะนำให้ใช้ Flexbox:

ให้แน่ใจว่าได้เพิ่มคำนำหน้าผู้ขายที่เหมาะสมแม้ว่า!

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}

<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

กรุณาใช้ flexbox สำหรับสิ่งนี้ คุณมีตู้คอนเทนเนอร์ที่จะงอเด็กในแถว เด็กคนแรกใช้พื้นที่ของมันเท่าที่จำเป็น อันที่สองโค้งงอเพื่อใช้พื้นที่ที่เหลือทั้งหมด:

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

วิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนี้คือ:

CSS:

label{ float: left; }

span
{
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;
}

span > input{ width: 100%; }

HTML:

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

ดูเหมือนว่า: http://jsfiddle.net/JwfRX/

เคล็ดลับง่าย ๆ คือใช้CSS calcสูตร เบราว์เซอร์สมัยใหม่ทั้งหมด IE9 เบราว์เซอร์มือถือที่หลากหลายควรรองรับสิ่งนี้

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>

คุณสามารถลองสิ่งนี้:

div#panel {
    border:solid;
    width:500px;
    height:300px;
}
div#content {
	height:90%;
	background-color:#1ea8d1; /*light blue*/
}
div#panel input {
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/
}

<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

หากคุณใช้ Bootstrap 4:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

ดีกว่าใช้สิ่งที่มีอยู่ใน Bootstrap:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/