首頁 > web前端 > css教學 > 如何使輸入元素填滿其容器的剩餘寬度?

如何使輸入元素填滿其容器的剩餘寬度?

Susan Sarandon
發布: 2024-11-13 07:50:02
原創
254 人瀏覽過

How to Make an Input Element Fill the Remaining Width of its Container?

如何設定輸入元素的樣式以適合其容器的剩餘寬度

您可能經常遇到這樣的情況:輸入元素旁邊有一個固定的標籤-寬度容器。目標是讓輸入欄位動態調整其寬度以填滿剩餘空間,而不會導致任何換行。

CSS 解決方案

<br>form {<pre class="brush:php;toolbar:false">width: 500px;
overflow: hidden;
background-color: yellow;
登入後複製

}<br>輸入{

width: 100%;
登入後複製

}<br>跨度{

display: block;
overflow: hidden;
padding-right:10px;
登入後複製

}<br>按鈕{

float: right;
登入後複製

}<br>

<br>
登入後複製
 <button>Search</button>
 <span><input type="text" title="Search" /></span>
登入後複製

<br>< ;/pre>

此解決方案採用了多項關鍵技術:

  • 輸入元素被包裝在span 中,並帶有display: block 屬性,將其設定為像區塊級元素一樣。
  • 跨度還有一個 overflow:hidden 屬性,以防止任何多餘的輸入溢出可見。
  • 按鈕浮動到,使其位於容器的最右側。
  • 輸入元素的寬度設定為100%,有效填滿表單內的剩餘寬度。

此方法提供了一種簡單有效的方法來動態調整輸入元素的大小以適應剩餘寬度,而不管標籤的長度如何.

以上是如何使輸入元素填滿其容器的剩餘寬度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板