試圖將另一個跨度放在跨度上

我試圖將另一跨度放在第一個跨度下，但也與圓圈在同一行上。試圖將另一個跨度放在跨度上

這是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

試圖將另一個跨度放在跨度上

回答

相關問題