Question

有一个问题，我知道它的一些简单我做错了但我没有时间继续玩它直到我搞清楚。我有两个ul，在每个li中我需要将文本对齐到图像的右边而不是像EXAMPLE IMAGE OF ISSUE

那样在下面包裹

<section id="providerBenefits">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h1 class="display-3">Befefits<br />for providers</h1>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListLeft">
          <li><img src="./assets/img/CCM-Page_12.png" />Lower costs and higher revenue</li>
          <li><img src="./assets/img/CCM-Page_16.png" />Valued-based chronic care management with full system setup</li>
          <li><img src="./assets/img/CCM-Page_23.png" />Coordination of total care plan of<br />20-minute clinical staff time</li>
        </ul>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListRight">
          <li><img src="./assets/img/CCM-Page_09.png" />80-85% comprehensive care plan<br />established, implemented, and monitored</li>
          <li><img src="./assets/img/CCM-Page_18.png" />Electronic Health Record system<br />compatibility</li>
          <li><img src="./assets/img/CCM-Page_21.png" />24/7 acces to statistical reports</li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 1

尝试使用此方法代替ul li element ..

<div class="container">
<div class="row">
    <div class="col-md-6">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2MDkzNzUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2MDkzNzUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          </div>
        </div>
    </div>
</div>

Answer 2

将img与span和span中的text和div

一起包含dispal:flex;

即，li将更改为

 <li>
    <div>
        <span><img src="https://placehold.it/100x20" /></span>
        Lower costs and higher revenue
    </div>
 </li>

ul {
  list-style: none;
}

ul li div {
  display: flex;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="providerBenefits">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h1 class="display-3">Befefits<br />for providers</h1>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListLeft">
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Lower costs and higher revenue
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Valued-based chronic care management with full system setup
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Coordination of total care plan of<br />20-minute clinical staff time
          </div></li>
        </ul>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListRight">
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>80-85% comprehensive care plan<br />established, implemented, and monitored
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Electronic Health Record system<br />compatibility
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>24/7 acces to statistical reports
          </div></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 3

以下是答案，您可以查看所提供的example

'https://jsfiddle.net/anmolsandal/91t0sevb/'

您也可以使用弹性框来完成。这是代码和demo

<section id="providerBenefits">
  <div class="container">
    <ul id="benefitListRight">
      <li><img src="https://dummyimage.com/100/ffffff/000000" /><span>80-85% comprehensive care plan<br />established, implemented, and monitored</span></li>
      <li><img src="https://dummyimage.com/100/ffffff/000000" /><span>80-85% comprehensive care plan<br />established, implemented, and monitored</span></li>
    </ul>
  </div>  
</section>

的CSS

ul
{
 padding: 0;
 margin: 0;
 list-style: none;
}
ul li {
 display: flex;
 flex-direction:row;
 justify-content: flex-start;
 align-items: center;
 margin-bottom: 20px;
}
ul li img {
 margin-right: 10px;
}

使用<li>将文本对齐图像右侧

3 个答案: