Question

我正试图在第一个跨度下面放置另一个跨度，但也在与圆圈相同的行上。

这是html

 <div class="dialog-box">
    <div class="dialog-box-circle"></div>
    <span class="dialog-box-name">My Name -
      <select>
        <option>@private</option>       
        <option>@public</option>        
      </select>
    </span>
    <span class="dialog-box-day">theproblem<span>
    <span class="dialog-box-text">Dont forget to bring the new calender for the meeting.</span>
 </div>

这是css

.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-box{
    position:absolute;
    width:365px;    
    background-color:white;

    margin: 10px 8px 10px 8px;
    border:1px solid #cccccc;
}
.dialog-box-circle{
    display:inline-block;
    position:relative;
    width:35px;
    height:35px;
    border-radius:30px;
    background-color:#cccccc;
    margin:15px 10px 17px 15px;
    vertical-align:middle;

}
.dialog-box-name{
    display:inline-block;
    color:#6495ED;
    font-size:12px;

}
.dialog-box-text{
    display:inline-block;
    color:#cccccc;
    font-size:10px;
    font-family:'roboto_light';
    margin-left:15px;

}
.dialog-box-name select {
        border:0px;
        font-size:10px;
        font-family:'roboto_light';
        color:#454545;

}
.dialog-box-name select option{

}
.dialog-box-day{
    display:inline-block;
    font-size:9px;
    font-family:'roboto_light';
    }

ul{
        display:inline-block;
        list-style: none;

    }

页面顶部有一个链接，可以让每个人的生活更轻松。

Answer 1

您缺少一个结束范围标记

<span class="dialog-box-day">theproblem<span>
            <span class="dialog-box-text">Dont forget to bring the new calender for the meeting.</span>

3个开放跨度和一个结束

Answer 2

看起来您需要做的就是浮动.dialog-box-circle。将其设置为float:left;，您应该会看到您要查找的内容。

我不是花车的粉丝，但是对于图像以及像这样的盒子模型，它应该没有任何伤害。

试图把另一个跨度放在跨度上

2 个答案: