CSS：应用溢出时文本对齐错误

Question

问题是当我想显示所有div内容未正确显示时，似乎对齐不起作用。有人可以帮我解决这个问题吗？我目前的CSS片段就是这个。

HTML

<section  id="32" class="products"  name="4"   company="1"> 
   <div class="product-header-container">
    <div class="title-product">
      <input id="32"  type="checkbox"  tax="0" value="1248" RangePricing="0" OrderNumber="56" name="Basic"  checked > <span class="title-product-value">   U.S. Maintenance Plan  </span>
    </div> 
    <div class="price-product">
      <span class="price-product-value">$1,248.00</span>
    </div>
    <div class="description-product" hidden>Pays for the regular maintenance</div>      
    <div class="displayname-product">Pays for the regular maintenance</div>
  </div>

  <li class="bulletPoint">Oil &amp; Filter Replacement</li>
  <li class="bulletPoint">Tire Rotation</li>
  <li class="bulletPoint">Fuel Injection</li>
  <li class="bulletPoint">Breake Pads and Rental Car Allowance</li>
  <li class="bulletPoint">Service</li>

  <div class="icons-products">
    <a style="padding-right:5px;" id="modal1" class="linkmodal1 UsingWebService"data-toggle="modal" data-target="#myModal1" ><i class="fa fa-cog" title="Options"></i></a>
    <a style="padding-right:5px;" id="modal2" class="linkmodal2"data-toggle="modal" data-target="#myModal2" ><i class="fa fa-file-text-o" title="Brochure"></i></a>
  </div>
</section>

CSS

.title-product {
    color: #41699A;
    font-weight: bold;
    float: left;
    font-size: 11px;
    width: 70%;
    display: inline-block;
}

.price-product {
    float: right;
    overflow: auto;
    font-size: 11px;
    margin-top:5px;
    padding-left: 0px;
    text-align: right;
}

.price-product-value {
    width: 45px;
    text-align: right;
}

由于

Answer 1

您是否尝试从.price-product-value移除宽度？因为你有一个固定的宽度，一些价格可能会溢出它，如果你有overflow:auto，它将显示滚动条。您也可以尝试更改为overflow:hidden。

Answer 2

相对定位.product-header-container（即position: relative）。然后，绝对定位.price-product（即position: absolute）并将.price-product坐标设置为top: 5px和right: 5px。使用它来将价格div放在右上角。

从float删除overflow，text-align和.price-product。你可以删除.price-product-value类。此外，span中的.price-product不是必需的。