设置表单中元素的宽度（以及在 DIV 中）答案

【问题标题】：setting the width of elements in a form (and inside a DIV)设置表单中元素的宽度（以及在 DIV 中）
【发布时间】：2019-12-29 02:22:22
【问题描述】：

这里我需要一点推动力。我正在帮助一位朋友完成验证过程。我尝试在这里实施解决方案：Set width of a form inside a div, to the max-width of it's parent

但对我不起作用。我的 HTML 生锈了。我希望输入文本框的宽度为 500px。这是我的表单代码：

<div style="max-width:500px;">
<form action="validation.php" method="post" name="frm" style="width:100%;">
    <center><br />
     Enter Your Product Key:<br />
        <input type="text" id="key" name="key" style="width:100%"/><br />
    </center>
  <p>
    <center><input type="submit" id="valcheck" value="Validate My Product Key" /></center>
  </p>
</form>
</div>

我做错了什么？谢谢。

丹尼尔，我把它保存到帖子里了。见下文：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validation Page</title>
</head>

<body>

    <div style="max-width:500px;">
    <form action="validation.php" method="post" name="frm" style="width:100%;">
        <center><br />
         Enter Your Product Key:<br />
          	<input type="text" id="key" name="key" style="width:100%"/><br />
        </center>
      <p>
      	<center><input type="submit" id="valcheck" value="Validate My Product Key" /></center>
      </p>
    </form>
    </div>

</body>
</html>

【问题讨论】：

sn-p 工具在哪里？我不经常在这里发帖。我假设您是在谈论位于此站点上的工具？
我认为我没有在这里发帖显示丹尼尔。像您描述的那样，我在 SO 页面上看不到任何图标。您是在描述浏览器应用程序中的图标，比如 firefox 吗？
stackoverflow.blog/2014/09/16/… 涵盖了一切——遗憾的是，他们描绘的形象已经过时了。这是菜单栏上的最后一个：cdn.sstatic.net/Img/unified/wmd-buttons.svg?v=8b134e4f9bb0
我编辑了我的帖子 Daniel。顺便说一句，我到底要如何在这里发布实际的回复，而不是仅仅在我们的对话中添加 cmets！？我也不知道该怎么做！我的页面上没有选项。
我编辑了我的帖子并为你保存了其中的 sn-p。正如我之前所说，sn-p 运行良好。此外，我无法将我们的这些“cmets”大部分用于“聊天”，因为我收到一条错误消息，提示“用户 [xxxxx] 只有 17 个声望点。不足以开始聊天”。

标签： html forms input width

【解决方案1】：

使用 CSS 而不是 HTML：

form {
    max-width: 500px;
}

您可以max-width 整个表单，因为文本和按钮无论如何都小于 500 像素。

【讨论】：

【解决方案2】：

您应该有一个单独的 .css 文件用于样式设置。

【讨论】：

@AdamEvanovich 在他的问题中在哪里使用了 CSS？
他没有。但我认为他应该。我的意思是他应该创建一个 .css 文件并将其链接到 html
这是一个ms access程序员的解决方案。在 html 文件中包含 css 文件作为链接只会增加混乱。我给了他解决方案而没有解决这个问题。无论如何，这是一个小烦恼。谢谢大家。