如何使用輸入按鈕和文本大小按鈕設置td的樣式？

如何使<td>寬度完全一樣輸入OK按鈕和其它輸入最大寬度，以及如何設置的輸入的value="Ok"文字大小：如何使用輸入按鈕和文本大小按鈕設置td的樣式？

<div id="resourcelink"> 
    <form method="POST" action="FeedController"> 
     <table id="resource-link"> 
      <tr> 
       <td><input type="text" id="resourcelink" name="sourceLink" /></td> 
       <td><input type="submit" name="linkSub" value="Ok" /></td> 
      </tr> 
     </table> 
    </form> 
</div> 
<body>

enter image description here

的CSS：

input#resourcelink { 
    width: 100%; 
}

來源

2015-06-24 Ruslan Lomov

首先清理標記。有重複的元素ID。每個ID必須在每個頁面上唯一。 – DaveB

相反<input type="submit">，請嘗試使用<button>元素。您會發現將CSS樣式應用於其更容易。

如果你申請boz-sizing: border-box CSS規則的表單元素，那麼你可以簡單地給他們100％的寬度，他們將填補完美的可用空間：

td.wide { width:300px; } 
 
td.narrow { width:100px; } 
 

 
input[type="text"] { 
 
    font-size:1.5em; 
 
    padding:0.25em; 
 
    box-sizing: border-box; 
 
    width:100%; 
 
} 
 
button[type="submit"] { 
 
    font-size:1.5em; 
 
    padding:0.25em; 
 
    box-sizing: border-box; 
 
    width:100%; 
 
}

<div> 
 
    <form> 
 
    <table id="resourcelink"> 
 
     <tr> 
 
     <td class="wide"><input type="text" /></td> 
 
     <td class="narrow"><button type="submit">OK</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td style="background-color:#fa0; height:10px;"></td> 
 
     <td style="background-color:#46f; height:10px;"></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="2">(The coloured bars are just here to 
 
         illustrate the column sizes.)</td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
</div> 
 
<body>

（注：border-box規則爲supported in all modern browsers，但如果您想支持舊版瀏覽器，則必須包含解決方法。）

來源

2015-06-24 23:02:04

如何使用輸入按鈕和文本大小按鈕設置td的樣式？

回答

相關問題