我正在尝试使带有文本“我的名字”的 span 站在圆形 div 旁边。两者的 display 属性都设置为 inline-block 但它仍然卡住了。密码是in this link .
.container {
position: absolute;
width: 382px;
height: 529px;
border: 1px solid black;
background-color: #cccccc;
}
header {
position: relative;
width: 100%;
height: 41px;
color: white;
background-color: #de4b4b;
font-weight: bold;
font-size: 14px;
margin: auto;
}
header span {
display: inline-block;
padding-left: 172px;
padding-top: 14px;
padding-bottom: 14px;
}
.sub-header {
position: relative;
width: 100%;
height: 37px;
background-color: white;
font-size: 10px;
margin: auto;
color: black;
}
.sub-header span {
display: inline-block;
padding-top: 14px;
padding-left: 10px;
}
.dialog-box1 {
position: absolute;
width: 365px;
background-color: white;
margin: 10px 8px 10px 8px;
border: 1px solid #cccccc;
}
.dialog-box1-circle {
display: inline-block;
position: relative;
width: 35px;
height: 35px;
border-radius: 30px;
background-color: #cccccc;
margin: 15px 10px 17px 15px;
}
.dialog-box-name {
display: inline-block;
color: #6495ED;
font-size: 12px;
width: 100%;
}
.dialog-box-text {
color: #cccccc;
font-size: 10px;
font-family: 'roboto_light';
margin-left: 15px;
}<!doctype html>
<body>
<div class="container">
<header><span>Note</span>
</header>
<div class="sub-header"><span>Friday 25.7.13 </span>
</div>
<div class="dialog-box1">
<div class="dialog-box1-circle"></div>
<span class="dialog-box-name">My Name</span>
<span class="dialog-box-text">Dont forget to bring the new calender for the meeting.</span>
</div>
</div>
</body>最佳答案
从 span 中删除 css 显示
并添加css vertical align:middle on the circle
关于html - 将带有文本 "my name"的跨度放置在圆形 div 旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30372853/