內嵌塊CSS

Question

我得到的問題，在我的CSS代碼....

的問題是....

爲什麼「圖標朋友」和「圖標隱私」不想被對齊文字

的Home.html

<link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css"> 

<div class="privacy-select"> 
    <span class="display-ib"> 
    <span class="mdi mdi-earth"></span> 
    <p>World</p> 
    </span> 

    <ul class="my-dropdown"> 
    <li> 
     <span class="mdi mdi-account"></span> 
     <p>Friend</p> 
    </li> 
    <li> 
     <span class="mdi mdi-lock"></span> 
     <p>Privacy</p> 
    </li> 
    </ul> 

</div> 

Home.css

.privacy-select { 
    position: relative; 
    display: inline-block 
} 

span { 
    display: inline-block; 
} 

p { 
    margin: 0; 
    display: inline-block; 
} 

ul { 
    dispaly: inline-block; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.my-dropdown { 
    position: absolute; 
    top: 100%; 
    right: 0; 
    margin-top: 1em; 
} 

見我的編碼在https://jsfiddle.net/FIERMANDT/7gygxncp/

Answer 1

那是因爲你們已經做出了privacy-select DIV內嵌塊 - 這意味着它的寬度是一樣寬，最寬的元素中 - 在這種情況下是display-ib跨度爲您所做的UL絕對位置（移動出來的流動）

這意味着，因爲這是不夠寬爲UL項目，該項目的UL將包裹除非你告訴他們不要：

.privacy-select { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
span { 
 
    vertical-align: middle; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.my-dropdown { 
 
    position:absolute; /* does this need to be absolutely positioned - removing this is another way fix your issue */ 
 
    top:100%; 
 
    right: 0; 
 
    margin-top: 1em; 
 
    white-space:nowrap; /* add this, or alternately give this a min-width, or you could make privacy-select a block element */ 
 
}

<link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css"> 
 
<div class="privacy-select"> 
 
    <span class="display-ib"> 
 
    <span class="mdi mdi-earth"></span> 
 
    <p>World</p> 
 
    </span> 
 

 
    <ul class="my-dropdown"> 
 
    <li> 
 
     <span class="mdi mdi-account"></span> 
 
     <p>Friend</p> 
 
    </li> 
 
    <li> 
 
     <span class="mdi mdi-lock"></span> 
 
     <p>Privacy</p> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

刪除position:absolute從.my-dropdown類

.privacy-select { 
 
    position: relative; 
 
    display: inline-block 
 
} 
 

 
span { 
 
    display: inline-block; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
ul { 
 
    dispaly: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.my-dropdown { 
 
    top: 100%; 
 
    right: 0; 
 
    margin-top: 1em; 
 
}

<link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css"> 
 

 
<div class="privacy-select"> 
 
    <span class="display-ib"> 
 
    <span class="mdi mdi-earth"></span> 
 
    <p>World</p> 
 
    </span> 
 
    
 
    <ul class="my-dropdown"> 
 
    <li> 
 
     <span class="mdi mdi-account"></span> 
 
     <p>Friend</p> 
 
    </li> 
 
    <li> 
 
     <span class="mdi mdi-lock"></span> 
 
     <p>Privacy</p> 
 
    </li> 
 
    </ul> 
 
    
 
</div>

也：JS Fiddle Demo

Answer 3

改變位置從absolute到relative。所以，你的圖標將是相對於DIV

.my-dropdown { 
    position: relative; 
    top: 100%; 
    right: 0; 
    margin-top: 1em; 
} 

Answer 4

你.my-dropdown容器太窄 - 設置一個寬度，並allign它left: 0代替right: 0。

此外，您在'display'有一個錯字的ul

這裏＃S上的小提琴：https://jsfiddle.net/w133fbu8/1/

Answer 5

.privacy-select { 
    position: relative; 
    display: inline-block 
} 

span { 
    display: inline-block; 
} 

p { 
    margin: 0; 
    display: inline-block; 
} 

ul { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.my-dropdown { 
    position: absolute; 
    width: 90px; 
    top: 100%; 
    left: 0; 
    margin-top: 1em; 
} 


<link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css"> 

<div class="privacy-select"> 
    <span class="display-ib"> 
    <span class="mdi mdi-earth"></span> 
    <p>World</p> 
    </span> 

    <ul class="my-dropdown"> 
    <li> 
     <span class="mdi mdi-account"></span> 
     <p>Friend</p> 
    </li> 
    <li> 
     <span class="mdi mdi-lock"></span> 
     <p>Privacy</p> 
    </li> 
    </ul> 

</div>