html - 如何将文本放入框中?
问题描述
我有一个问题,如何在框中输入以下文字?
body {
background: rgb(246, 249, 250);
color: rgb(25, 25, 25);
font-family: "PingFang SC", "Helvetica Neue", "Microsoft
YaHei", Arial, sans-serif;
}
.say {
text-align: center;
color: rgb(117, 117, 117);
font-size: 1.1rem;
line-height: 1.16667rem;
}
.con {
background: white;
border: 1px solid rgb(209, 209, 209);
border-radius: 0.5rem;
margin: 0px 8px 8px;
padding: 12px 10px;
height: 3.5rem;
}
img {
height: 2.9rem;
width: 2.9rem;
}
.txt {
float: left;
font-size: 1.16667rem;
width: calc(100% - 3.7rem);
margin-left: 4rem;
}
.txt p:nth-child(2) {
color: rgb(117, 117, 117);
}
<div class="box">
<div class="say">
<p>Download now!</p>
<p>No need of mobile data!</p>
</div>
<div class="con">
<div class="list">
<div class="use">
<img src="icon.png" alt="icon">
<div class="txt">
<p>SMA205F</p>
<p>shared 0 files</p>
</div>
</div>
</div>
</div>
</div>
解决方案
body{
background: rgb(246, 249, 250);
color: rgb(25, 25, 25);
font-family: "PingFang SC", "Helvetica Neue", "Microsoft
YaHei", Arial, sans-serif;
}
.say{
text-align: center;
color: rgb(117, 117, 117);
font-size: 1.1rem;
line-height: 1.16667rem;
}
.con{
background: white;
border: 1px solid rgb(209, 209, 209);
border-radius: 0.5rem;
margin: 0px 8px 8px;
padding: 12px 10px;
height: 3.5rem;
}
img{
height: 2.9rem;
width: 2.9rem;
}
.txt{
float: left;
font-size: 1.16667rem;
width: calc(100% - 3.7rem);
margin-left: 4rem;
}
.txt p:nth-child(2){
color: rgb(117, 117, 117);
}
.use{display: flex;}
p{margin: 0}
<div class="box">
<div class="say">
<p>Download now!</p>
<p>No need of mobile data!</p>
</div>
<div class="con">
<div class="list">
<div class="use">
<img src="icon.png" alt="icon">
<div class="txt">
<p>SMA205F</p>
<p>shared 0 files</p>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- linux-kernel - 尝试在 /dev 中打开设备文件然后我得到:open() failed with error [No such device]
- python - dlib(setup.py)循环的构建轮
- ios - 为什么共享视频只发送到其他一些应用程序?
- android - 使用带有旋转的android中的画布创建一个有4个段的圆
- sql - 子查询会降低查询性能
- javascript - self.registration.getNotifications() 在 firebase-messaging-sw 中返回一个空数组
- java - 如何使用带参数的自定义注释查找 CDI bean?
- c++ - 在 C++ 中使用 D 和 E 表示法有什么区别?
- sqlite - 数据库中的目标行
- excel - 数据透视表 - 将付款合并为一个