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

我试图将另一跨度放在第一个跨度下，但也与圆圈在同一行上。试图将另一个跨度放在跨度上

这是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; 

    }

没有在页面顶部的链接，让生活的每一个容易..

来源

2015-05-21 omer

它看起来像所有你需要做的是浮动.dialog-box-circle。将其设置为float:left;，你应该看到你在找什么。

我不是浮动的粉丝，但与图像和像这样的盒子模型，它应该没有伤害。

来源

2015-05-21 20:26:25 CreMedian

现在确定它的花车，但我如何释放圆下的空间？ – omer

https://jsfiddle.net/rmje7xz3/11/ – omer

如果您希望文本位于该圆圈下方，则看起来您只需将“margin-bottom”属性调整为小于13px即可。我将margin设置为'.dialog-box-circle {margin：15px 10px 10px 15px;}'并且它看起来不错。 – CreMedian

您缺少一个合拢范围标签

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

3日开幕的跨度和一个关闭

来源

2015-05-21 20:23:25 Sardoan

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

回答

相关问题