如何在html的`fa-circle-thin`类的右侧添加文本？

时间：2017-03-15 03:53:30

标签： html css twitter-bootstrap

我需要创建一个如下图所示的布局。我尝试使用下面的代码，但是在fa-circle-thin类的右侧添加文本很困难。我怎样才能实现它？

＆＃13;
＆＃13; 
.test {
  height: 100px;
  margin-top: 21px;
  margin-left: 9px;
  position: relative;
  padding-left: 20px;
  border-left: 2px solid #b5b3b5;
}

.modal-body {
  margin: 20px;
}
＆＃13; 
<div class="modal-body">
  <i class="fa fa-circle-thin" style="font-size:24px;color:#b5b3b5; position: absolute;"></i>
  <div class="test"></div>
  <i class="fa fa-circle-thin" style="font-size:24px;color:#b5b3b5; position: absolute;"></i>
  <div class="test"></div>
  <i class="fa fa-circle-thin" style="font-size:24px;color:#b5b3b5; position: absolute;"></i>
</div>
＆＃13;
＆＃13;
＆＃13;

enter image description here

2 个答案:

答案 0 :(得分：1)

这是css伪选择器的一个很好的用例。请查看下面的（更新的）fiddle或以下代码段，如果您有具体问题，请与我们联系。

＆＃13;
＆＃13; 
.modal-body{
  margin: 20px;
}

.circle-wrapper {
  position: relative;
}
.circle-wrapper::after {
  height: 50px;
  border-left: 2px solid #b5b3b5;
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: 21px;
}

.circle-wrapper::before {
  height: 46px;
  border-left: 2px solid #b5b3b5;
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: -44px;
}

.circle-wrapper:last-child::after {
  display: none;
}

.circle-wrapper:first-child::before {
  display: none;
}
.modal-body .fa {
    font-size: 24px;
    color: #b5b3b5;
    display: inline;
    vertical-align: middle;
}

.modal-body .text {
  vertical-align: middle;
  margin-left: 10px;
}

.inner-circle .fa {
   font-size: 16px;
}

.inner-circle {
  font-size: 12px;
  margin-left: 50px;
  position: relative;
  height: 35px;
}

.inner-circle::before {
  height: 22px;
  border-left: 1px solid #b5b3b5;
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  top: 2px;
}

.inner-circle:last-child::after {
  height: 18px;
  border-left: 1px solid #b5b3b5;
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  top: 36px;
}

.inner-circle:last-child {
  height: 50px;
  margin-bottom: 5px;
}
.inner-contents {
  position: relative;
  top: 22px;
}
＆＃13; 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">

<div class="modal-body">
      <div class="circle-wrapper">
          <div class="outer-circle">
            <i class="fa fa-circle-thin"></i>
            <span class="text">Test code</span>
          </div>
          <div class="inner-circle">
              <div class="inner-contents">
                  <i class="fa fa-circle-thin"></i>
                  <span class="text">Test code inner</span>
              </div>
          </div>
          <div class="inner-circle">
              <div class="inner-contents">
                  <i class="fa fa-circle-thin"></i>
                  <span class="text">Test code inner 2</span>
              </div>
          </div>
      </div>
      <div class="circle-wrapper">
        <div class="outer-circle">
              <i class="fa fa-circle-thin"></i>
              <span class="text">Test code 2</span>
          </div>
          <div class="inner-circle">
              <div class="inner-contents">
                  <i class="fa fa-circle-thin"></i>
                  <span class="text">Test code inner</span>
              </div>
          </div>
          <div class="inner-circle">
              <div class="inner-contents">
                  <i class="fa fa-circle-thin"></i>
                  <span class="text">Test code inner 2</span>
              </div>
          </div>
      </div>
      <div class="circle-wrapper">
          <div class="outer-circle">
            <i class="fa fa-circle-thin"></i>
            <span class="text">Test code 3</span>
          </div>
      </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你能编辑这段代码......... 

/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */


/* -------------------------------------
 * General Style
 * ------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  font-size: 100%;
  font-family: "Noto Sans", sans-serif;
  color: #eee9dc;
  background: #48b379;
}

h2 {
  margin: 3em 0 0 0;
  font-size: 1.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
}


/* -------------------------------------
 * timeline
 * ------------------------------------- */

#timeline {
  list-style: none;
  margin: 50px 0 30px 120px;
  padding-left: 30px;
  border-left: 8px solid #eee9dc;
}

#timeline li {
  margin: 40px 0;
  position: relative;
}

#timeline p {
  margin: 0 0 15px;
}

.date {
  margin-top: -10px;
  top: 50%;
  left: -158px;
  font-size: 0.95em;
  line-height: 20px;
  position: absolute;
}

.circle {
  margin-top: -10px;
  top: 50%;
  left: -44px;
  width: 10px;
  height: 10px;
  background: #48b379;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  padding: 50px 20px 0;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}

.content:before,
.content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}

.content:before {
  border-right-color: inherit;
  border-width: 20px;
  top: 50%;
  margin-top: -20px;
}

.content:after {
  border-right-color: #48b379;
  border-width: 17px;
  top: 50%;
  margin-top: -17px;
}

.content p {
  max-height: 0;
  color: transparent;
  text-align: justify;
  word-break: break-word;
  hyphens: auto;
  overflow: hidden;
}

label {
  font-size: 1.3em;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top: 20px;
  transition: transform 0.2s linear;
}

.radio {
  display: none;
}

.radio:checked+.relative label {
  cursor: auto;
  transform: translateX(42px);
}

.radio:checked+.relative .circle {
  background: #f98262;
}

.radio:checked~.content {
  max-height: 180px;
  border-color: #eee9dc;
  margin-right: 20px;
  transform: translateX(20px);
  transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}

.radio:checked~.content p {
  max-height: 200px;
  color: #eee9dc;
  transition: color 0.3s linear 0.3s;
}


/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */

@media screen and (max-width: 767px) {
  #timeline {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  #timeline li {
    margin: 50px 0;
  }
  label {
    width: 85%;
    font-size: 1.1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    transform: translateX(18px);
  }
  .content {
    padding-top: 45px;
    border-color: #eee9dc;
  }
  .content:before,
  .content:after {
    border: solid transparent;
    bottom: 100%;
  }
  .content:before {
    border-bottom-color: inherit;
    border-width: 17px;
    top: -16px;
    left: 50px;
    margin-left: -17px;
  }
  .content:after {
    border-bottom-color: #48b379;
    border-width: 20px;
    top: -20px;
    left: 50px;
    margin-left: -20px;
  }
  .content p {
    font-size: 0.9em;
    line-height: 1.4;
  }
  .circle,
  .date {
    display: none;
  }
}
<h2>CSS3 Timeline</h2>

<ul id='timeline'>
  <li class='work'>
    <input class='radio' id='work5' name='works' type='radio' checked>
    <div class="relative">
      <label for='work5'>Lorem ipsum dolor sit amet</label>
      <span class='date'>12 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work4' name='works' type='radio'>
    <div class="relative">
      <label for='work4'>Lorem ipsum dolor sit amet</label>
      <span class='date'>11 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work3' name='works' type='radio'>
    <div class="relative">
      <label for='work3'>Lorem ipsum dolor sit amet</label>
      <span class='date'>10 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work2' name='works' type='radio'>
    <div class="relative">
      <label for='work2'>Lorem ipsum dolor sit amet</label>
      <span class='date'>09 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work1' name='works' type='radio'>
    <div class="relative">
      <label for='work1'>Lorem ipsum dolor sit amet</label>
      <span class='date'>08 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
</ul>

相关问题
最新问题