html - 如何使文本字段的边框缩放以适应 CSS 中文本字段的大小

Question

我正在处理一个 CSS/HTML 元素，我对文本字段的边框有疑问。在浏览器中，边框比文本字段短。

我尝试更改边框的大小以适合文本字段并且它有效，但我尝试在更大的屏幕上打开浏览器 (IE)，但我再次遇到同样的问题。

这是我的代码:

<tr>
  <td>First Name</td>
  <td>
    <div style="border:4px #26a570 solid;
			            background-color:white; 
						width:37.5%; 
						height:15%">
      <input type="text" name="txtFirst" id="txtFirst" />
    </div>
  </td>
</tr>

我希望边框在所有浏览器和屏幕中缩放到文本框的大小。

Answer 1

首先像@Nimsrules 提到的那样在输入周围放置边框。 其次使用视口(viewport)。这将使它具有可扩展性。您的视口(viewport)必须在头部。而不是使用 % 你可以使用 vw 作为宽度 en vh 作为高度。

示例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<tr>
    <td>First Name
</td>
    <td>
<div > 
    <input type="text" name="txtFirst" id="txtFirst" style="border:4px #26a570
 solid;background-color:white; width:37.5vw; height:15vh"/>
</div>
</td>
  </tr>

Fiddle

在这里您可以阅读更多关于 viewports 的信息.

此外，我不推荐内联 CSS。最好使用 css 文件。阅读this有关不推荐的更多信息。