Inline block CSS

Question

I get the problem in MY CSS CODE....

The problem is....

Why 'icons friends' and 'icon privacy' do not want to be aligned with the 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;
}

See my coding in https://jsfiddle.net/FIERMANDT/7gygxncp/

Pete · Accepted Answer · 2017-05-05 11:09:02Z

3

It's because you have made your privacy-select div inline block - this means that it's width is as wide as the widest element inside - in this case that is the display-ib span as you have made the ul absolutely position (moving it out of the flow)

This means that because this is not wide enough for the ul items, the ul items will wrap unless you tell them not to:

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

answered May 5, 2017 at 11:09

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Firmansyah Over a year ago

THANKS :D, AWESOME FOR ME :D

sainu · Accepted Answer · 2017-05-05 12:28:31Z

1

Change position from absolute to relative. So that your icons will be relative to the div

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

edited May 5, 2017 at 12:28

sainu

2,7013 gold badges26 silver badges43 bronze badges

answered May 5, 2017 at 11:12

Vijay Vj

3774 silver badges17 bronze badges

Comments

ani_css · Accepted Answer · 2017-05-05 11:11:30Z

remove position:absolute from your .my-dropdown class

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

also: JS Fiddle Demo

Johannes · Accepted Answer · 2017-05-05 11:13:50Z

0

Your .my-dropdown container is too narrow - set a width to it and allign it left: 0 instead of right: 0 .

Also, you had a typo in ´display´ for the ul

Here#s the fiddle: https://jsfiddle.net/w133fbu8/1/

answered May 5, 2017 at 11:13

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Comments

Hardik Chapla · Accepted Answer · 2017-05-05 12:25:49Z

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

Collectives™ on Stack Overflow

Inline block CSS

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related