如何使用输入按钮和文本大小按钮设置 td 样式？

Question

如何使 <td> 宽度与输入确定按钮和其他输入最大宽度完全一致？以及如何设置输入 value="Ok" 的文本大小：

<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>

Css:

input#resourcelink {
    width: 100%;
}

Answer 1

尝试使用 <button> 元素，而不是 <input type="submit">。您会发现将 CSS 样式应用到更容易。

如果您将 boz-sizing: border-box CSS 规则应用到表单元素，那么您只需将它们的宽度设置为 100%，它们将完美填充可用的 space：

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，但如果您想支持旧版浏览器，则必须包含解决方法。）

如何使用输入按钮和文本大小按钮设置 td 样式？

How to style td with input button and text-size button?

html

css

styling