Inline Block CSS

Question

ich das Problem in meinem CSS-Code zu bekommen ....

Das Problem ist ....

Warum 'Icons Freunde' und 'Symbol Privatsphäre' will nicht mit ausgerichtet werden der Text

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; 
} 

Siehe meine Codierung in https://jsfiddle.net/FIERMANDT/7gygxncp/

Answer 1

Es ist, weil Sie Ihre privacy-select div Inline-Block gemacht haben - das bedeutet, dass es Breite innen so breit wie die breiteste Element ist - in diesem Fall, dass die display-ib Spanne ist, wie Sie die ul gemacht haben absolut Position (moving es aus dem Fluss)

Dies bedeutet, dass, weil diese nicht breit genug für die ul Artikel ist, wird wickeln die ul Artikel, wenn Sie ihnen sagen, nicht zu:

.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

entfernen position:absolute von Ihrer .my-dropdown Klasse

.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>

auch: JS Fiddle Demo

Answer 3

Position ändern von absolute zu relative. setzt eine Breite zu ihm und allign es left: 0 statt right: 0 - Damit Ihre Symbole werden an die div

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

Answer 4

Ihre .my-dropdown Behälter zu schmal sind relativ sein.

Auch hatte man einen Tippfehler in'display' für die ul

Hier # s die Geige: 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>