gpt4 book ai didi

html - 为什么当我编辑输入元素的大小时,相邻元素的大小也会增加?

转载 作者:行者123 更新时间:2023-12-04 08:42:25 25 4
gpt4 key购买 nike

所以我有两个嵌套在 div 中的输入元素,一个 文字输入和一个 按钮 .
但是,当我增加按钮的宽度和高度时,它也会增加相邻文本输入的大小。我想了解这是为什么。
我认为这是因为两者都位于嵌套的 div 内,并且受到 div 样式的影响。下面是我的 HTML。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">

<title>Nick's Todo List</title>
</head>

<body>
<h1 class="main-header">Nick's Todo List</h1>
<div class="input-container">
<input id="input-box" type="text">
<input id="add-btn" type="button">
</div>

<script src="./app.js"></script>
</body>

</html>
下面是我的 CSS
h1 {
text-align: center;
}

.input-container {
display: flex;
justify-content: center;
}

#add-btn {
width: 4.5em;
height: 4.5em;
}
谢谢!

最佳答案

你确定当你增加宽度 ,它也增加了相邻文本输入的宽度?实际上输入宽度不应该受到影响。
对于高度,您会遇到 flex 等高列功能。
flex 容器的初始设置是 align-items:stretch。
要覆盖此默认设置,请添加 align-items: flex-start到容器。
有一个很好的线程谈论等高的事情:
How to disable equal height columns in Flexbox?

关于html - 为什么当我编辑输入元素的大小时,相邻元素的大小也会增加?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64492703/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com