Question

如何使<td>宽度与输入ok按钮和其他输入最大宽度完全相同？以及如何设置输入文本大小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>

enter image description here

的CSS：

input#resourcelink {
    width: 100%;
}

Answer 1

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

会更容易

如果您将boz-sizing: border-box CSS规则应用于表单元素，那么您可以简单地给它们100％的宽度，它们将完美地填充可用空间：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

（注意：border-box规则为supported in all modern browsers，但如果您想支持旧浏览器，那么您必须包含变通方法。）

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

1 个答案: