CODEWITHSUNDEEP
htmlcss
pranami
pranami

Reputation: 1415

Add extra space from span and li tag

I have the below screen where there is a space at the top of the vc-e-att-26 text. I tried all possible ways I could think of including negative margin. But it still doesn't work.

enter image description here

Mt html file is :

And my scss file is :

I need the vcs-e-att-26 txt to be in the same line as the bullet. Can anyone please help me with this.

Upvotes: 0

Views: 776

Answers (2)

Atul Rajput
Atul Rajput

Reputation: 4178

There are some small mistakes:

  1. nothing but LI can be the direct child of UL, you are having the P and other elements in UL, only LI can be directly present there and the rest will be the child of LI.
  2. you have given the height and width directly to LI 10px, while all the data is present in you LI, that's why this mess was going on, if your data is dynamic and its can decrease and increase, its a very bad idea to give width to that element.
  3. create your element with before or after or put an extra span for this round circle. don't style your complete LI like it.

Just a suggestion, Use flex instead of floats,

I have given the basic idea to you below use it,

ul {
    list-style: none;
    margin-right: 20px;
   }

body {background-color: #ccc;}
   li span{
       color:black;
   }

   h4 {
       margin:20px;
   }

* {
padding: 0;margin: 0; box-sizing: border-box;
}
hr {
    width:100%;
    margin-right: 57%;
}


.uptime-container{
    background-color: white;
    margin: 20px;
    padding: 20px;
    max-width: 80%;
}
.uptime-container ul li span {position: relative;  padding-left: 20px;}
.red-circle >span:after {
    content: "";
    width: 10px;
    height: 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: red;
    margin-bottom: -5px;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .green-circle >span:after {
  display: block;
  content: "";
    width: 10px;
    height: 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: green;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
.uptime-container ul li {
  display: flex;

  justify-content: space-between;
  margin-bottom: 25px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
.uptime-container ul li:last-child {
   margin-bottom: 0px;
}
<div class="uptime-container">
  <h4>Uptime</h4>
  <ul *ngFor="let data of chartData">
    <li class="red-circle">
      <span>VCS-e-at-26</span>
      <p class="right-text">Down since lasrt 2 hours</p>
    </li>    
    <li class="green-circle">
      <span>VCS-e-at-26</span>
      <p class="right-text">10 minutes</p>
    </li>
    <li class="red-circle">
      <span>VCS-e-at-26</span>
      <p class="right-text">Down since lasrt 2 hours</p>
    </li>    
    <li class="green-circle">
      <span>VCS-e-at-26</span>
      <p class="right-text">10 minutes</p>
    </li>
  </ul>
</div>

Upvotes: 1

Aman
Aman

Reputation: 1550

There is a mistake in your HTML and CSS code, check the right code and solution here

DEMO

body{
  margin:0;
}

ul {
    list-style: none;
   }
span.right-text {
    float: right;
}
   h4 {
       margin:20px;
   }


hr {
    width:100%;
    margin-right: 57%;
}
ul li.my-class::before {
    background: red;
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 4px;
    border-radius: 50%;
}
ul li.my-class.green-circle::before{
  background: green;
}
li.my-class {
    position: relative;
    padding-left: 20px;
}
.uptime-container{
    background-color: white;
    width: 40%;
    margin-left: 20px;
    margin-top: 20px;
}
<div class="uptime-container">
  <h4>Uptime</h4>
  <ul *ngFor="let data of chartData">
    <li class="my-class red-circle">adadsadsad <span class="right-text">34324324234}</span></li>
    <hr>
    <li class="my-class green-circle">adadsadsad <span class="right-text">34324324234}</span></li>
    <hr>
    <li class="my-class green-circle">adadsadsad <span class="right-text">34324324234}</span></li>
    <hr>
    <li class="my-class green-circle">adadsadsad <span class="right-text">34324324234}</span></li>
    <hr>
  </ul>
</div>

Upvotes: 1

Related Questions