輸入文本框和寬度100％

我正在寫一個簡單的表單來發送一些數據到數據庫。輸入文本框和寬度100％

我在自己的公司使用它，所以我不需要有一個完美的風格。

我正在使用一個表格（這在這個應用程序中可以）。

<table width="500px" style="border:1px solid black; overflow:hidden"> 
    <tr> 
    <td>Born <input type="text" name="nato_pf" /></td> 
    </tr> 
</table>

我想設置輸入文本到100％（至該行的末端）的寬度，但是，如果我這樣做，輸入文本換行到一個新行。

我發現解決方案只使用div，他們目前不適合我。

編輯：有時我有兩個輸入（不同大小）在同一行，所以我認爲我不能添加其他td標籤。

來源

2013-08-01 Pepozzo

http://jsfiddle.net/gmmr7/1

table { 
    border:1px solid black; 
    width: 200px; 
} 

.left { 
    float: left; 
} 

.left2 { 
    overflow: hidden; 
    padding: 0 4px; 
} 

.left2>input { 
    width: 100% 
}

<table> 
    <tr> 
     <td> 
      <label class="left">Born</label> 
      <div class="left2"> 
       <input type="text" name="nato_pf" /> 
      </div> 
     </td> 
    </tr> 
</table>

來源

2013-08-01 10:52:51

因爲100％的文本框越過表格的邊框:) 可以定義另一個TD元素

<table width="500px" style="border:1px solid black; overflow:hidden"> 
    <tr> 
     <td>Born </td><td><input type="text" name="nato_pf" /></td> 
    </tr> 
</table>

寬度的CSS

input{ 
    width:99%; 

}

來源

2013-08-01 10:43:20

<table width="500px" style="border: 1px solid black; verflow: hidden"> 
    <tr> 
     <td style="width: 50px;"> 
      Born 
     </td> 
     <td> 
      <input type="text" name="nato_pf" style="width: 99%;" /> 
     </td> 
    </tr> 
</table>

99％，也給出了寬度到第一個td;）

jsFiddle http://jsfiddle.net/2yZmB/

來源

2013-08-01 10:46:29 Alesanco

輸入文本框和寬度100％

回答

相關問題