html - 当我尝试格式化它们以适合我的规格时,我的 div 中的两个元素会变得“不平衡”
问题描述
我有一个包含两个元素的 div。一个 Icon<i>
和一个 textarea <textarea>
。
我确切地知道我希望它看起来如何,并用计算出的尺寸做了一个快速的模型。如果我的模型太草率,布局就是这样。
div.container
的宽度为 220px ,高度为 35px width: 220px
height:35px
。
div 中的两个元素相距 4px,距离 div 的边框 4px。(我用填充做的)
该图标.fa-plus-square
的高度和宽度为 27px font-size: 27px
。(我假设这将宽度和高度设置为相同的大小,但我不确定。这可能是导致问题的原因)
textarea.input
的宽度为 181px ,高度为 27px width: 181px
height: 27px
。
实际发生了什么我将添加 div 着色为蓝色,以向您展示应该包含哪些元素。
html代码
<div class="add">
<i class="far fa-plus-square" type="submit"></i>
<textarea class="input" placeholder="Add to To-Do list"></textarea>
</div>
CSS
.add {
background-color: blue;
width: 220px;
height: 35px;
}
.fa-plus-square {
font-size: 27px;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
color: rgb(254, 217, 67);
}
.input {
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
resize: none;
width: 181px;
height: 27px;
outline: none;
}
如果需要更多信息,请告诉我。
解决方案
我没有你的图标,所以我放了一个白色的边框来模拟它。这是实现类似于您的模拟的代码(阅读评论):
.add * {
box-sizing: border-box; /* For precise calculations */
}
.add {
display: flex; /* Align items in a row, vertically centered */
align-items: center;
background-color: blue;
width: 220px;
height: 35px;
}
.fa-plus-square {
color: rgb(254, 217, 67);
width: 27px; /* The next properties are to make */
max-width: 27px; /* limit the size of the icon no matter */
height: 27px; /* how big the font size. */
max-height: 27px;
margin-left: 4px;
border: 1px solid white; /* So we can see the icon placeholder */
}
/*
Needed to add padding to
the text area
*/
.wrapper {
padding: 4px;
flex-grow: 1; /* Automatic adjustment */
height: 100%;
}
.input {
resize: none;
outline: none;
width: 100%; /* Adapts automatically in size */
height: 100%; /* to what we specified before */
}
<div class="add">
<i class="far fa-plus-square" type="submit"></i>
<div class="wrapper">
<textarea class="input" placeholder="Add to To-Do list"></textarea>
</div>
</div>
结果很精确:
推荐阅读
- macos-catalina - 如何在 macOS Catalina 上安装 gmp4
- html - extends - 如何忽略父级上的子级 CSS
- javascript - Giphy 无法在 Discord 机器人上运行(javascript)
- ios - iOS ARKit setWorldOrigin 没有效果
- azure - 如何阻止 Azure CDN 缓存 index.html
- git - 非常慢的 git rev-parse
- c# - C# Npgsql 连接检查器异常抛出 System.NullReferenceException '对象引用未设置为对象的实例。
- javascript - 下拉菜单上的切换开关关闭菜单
- reactjs - 在 redux 异步操作中使用 setTimeout 以模拟较慢的响应是一种不好的做法吗?反应 JS
- apache-spark - SparkConf 和 sparkContext 的目的