输入按钮不会扩展到CSS中设置的宽度？

Question

我试图制作一个简单的表格，其中有一个文本框和一个按钮。但是，为了测试目的，我将两者的宽度设置为500px，文本字段的长度是正确的，但提交按钮的宽度是12像素？

以下是代码：

input,
textarea {
  width: 500px;
}

<label>Name</label><br>
<input name="name" placeholder="Your name...">

<br>
<br>

<label>Message</label><br>
<textarea name="message" placeholder="Your message..."></textarea>

<br>
<br>

<input id="submit" name="submit" type="submit" value="Submit">

消息框和名称框的宽度都是正确的，但提交按钮的大小要小10个像素。

编辑：解决方案

感谢下面的帮助，我找到了解决方案，需要添加

box-sizing: border-box

输入CSS＆amp; textarea现在它正常工作。

Answer 1

您可以使用box-sizing: border-box;在自己的宽度中包含填充和边框（默认设置）。有关框大小调整的详细信息，请参阅MDN。

＆＃13;

＆＃13;

input,
textarea {
  width: 500px;
  box-sizing: border-box;
}

＆＃13;

<input name="name" placeholder="Your name...">
<textarea name="message" placeholder="Your message..."></textarea>
<input id="submit" name="submit" type="submit" value="Submit">

＆＃13;

＆＃13;

＆＃13;

Answer 2

将两个框的框大小设置为border-box以更改框模型

＆＃13;

＆＃13;

$sq = "CASE WHEN posts.content_type='post' THEN '1' ELSE ("
        . " SELECT json_array(parent.id,parent.title,"
        . " parent.slug,parent.description)"
        . " FROM posts AS parent, posts AS node"
        . " WHERE node.lft BETWEEN parent.lft AND parent.rgt"
        . " AND node.id = posts.id)"
        . " END as data";

$result = Post::where('deleted_at','NULL')
          ->where('is_approved','1')
          ->whereIn('user_id',[951,770,932])
          ->orWhereRaw('FIND_IN_SET(1,category_id)>0')
          ->orWhereRaw('FIND_IN_SET(2,category_id)>0')
          ->orWhereRaw('FIND_IN_SET(3,category_id)>0')
          ->orWhereRaw('FIND_IN_SET(7,category_id)>0')
          ->orWhereRaw('FIND_IN_SET(9,category_id)>0')
          ->select('*',DB::raw($sq))
          ->orderBy('created_at','DESC')
          ->skip(0)
          ->take(10)
          ->get();

＆＃13;

input,
textarea {
  width: 500px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可能意味着什么＆＃34;少12个像素＆＃34;是按钮左侧和右侧的6px填充（因此Chrome的开发人员工具显示＆＃34; 484x15＆＃34;按钮。

然而，填充是元素的一部分，因此按钮的总大小实际上是500px。如果要更改此行为，可以使用box-sizing。

input {
    box-sizing: border-box;
}