Why is the text falling down when it should be above the first line?

user_19560516 0
Viewed 36

Why does the text fall down when it should be under the first line?

I need the text to be above the first line, not under the icon.

(It looks like your post is mostly code; please add some more details.)

enter image description here

.block-left-navigation-content {
  margin: 0 0 0 0;
  display: flex;
  width: 300px;
  height: 100vh;
  background-color: #0f0f0f;
}

.block-left-navigation-content ul {
  display: block;
  overflow-y: scroll;
  max-height: calc(100vh - 5.9rem);
  overflow-y: auto;
  margin-top: 10px;
  top: 0;
  bottom: 0;
  width: 100%;
}

.block-left-navigation-list li {
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  border-top: 2px solid black;
  background-color: #151515;
}

.block-left-navigation-list a {
  display: inline-block;
  color: rgba(137, 137, 137, 0.9);
}

.block-left-navigation-list p {
  padding: 0;
  margin-left: 40px;
  display: inline-block;
}

.block-left-navigation-list i {
  height: 100%;
  color: rgba(137, 137, 137, 0.6);
  margin-right: 20px;
  border-radius: 2px;
  background-color: #212121;
  padding: 0 9px 0 9px;
}
<div class="block-left-navigation-content">
  <ul id="block-left-navigation-list" class="block-left-navigation-list">
    <li><a href=""><i class="fa fa-link" aria-hidden="true"></i>Lorem ipsum dolor sit amet consectetur adipisicing, elit.</a></li>
  </ul>
</div>

css html
1 Answers

I think the best way to do this would be to add display flex with a flex-direction of 'row' to the anchor tag, then add a paragraph tag to hold your text.

/* Main Change */

.block-left-navigation-list a {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: rgba(137, 137, 137, 0.9);
}


/* original code */

.block-left-navigation-content {
  margin: 0 0 0 0;
  display: flex;
  width: 300px;
  height: 100vh;
  background-color: #0f0f0f;
}

.block-left-navigation-content ul {
  display: block;
  overflow-y: scroll;
  max-height: calc(100vh - 5.9rem);
  overflow-y: auto;
  margin-top: 10px;
  top: 0;
  bottom: 0;
  width: 100%;
}

.block-left-navigation-list li {
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  border-top: 2px solid black;
  background-color: #151515;
}

.block-left-navigation-list p {
  padding: 0;
  margin-left: 40px;
  display: inline-block;
}

.block-left-navigation-list i {
  height: 100%;
  color: rgba(137, 137, 137, 0.6);
  margin-right: 20px;
  border-radius: 2px;
  background-color: #212121;
  padding: 0 9px 0 9px;
}
<div class="block-left-navigation-content">
  <ul id="block-left-navigation-list" class="block-left-navigation-list">
    <li>
      <a href="">
        <i class="fa fa-link" aria-hidden="true">DELETE</i>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit.</p>
      </a>
    </li>
  </ul>
</div>

Let me know if this fixes it for you!

user_179776030
Related