Блог

Главная - Вопросы по программированию - CSS: неправильное выравнивание текста при применении переполнения

CSS: неправильное выравнивание текста при применении переполнения

#html #css

#HTML #css

Вопрос:

Проблема в том, что когда я хочу отобразить все содержимое 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;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;
}

Спасибо

Ответ №1:

Вы пытались удалить ширину из .price-product-value ? Поскольку у вас фиксированная ширина, и некоторые цены могут ее превышать, если у вас есть, будут отображаться полосы прокрутки. overflow:auto Вы также можете попробовать изменить на overflow:hidden .

Комментарии:

1. И, пожалуйста, попробуйте объяснить это лучше. В чем именно ваша проблема? Полоса прокрутки по некоторым ценам?

2. именно в этом проблема, полосы прокрутки и выравнивание цен

3. Изменить overflow:auto на overflow:hidden

4. Я не хочу скрывать переполнение, я просто хочу показать содержимое и выровнять по вертикали все числа 🙂

5. Цифры выровнены (справа)! Ваша проблема — полосы прокрутки. Что происходит, когда вы удаляете ширину из .price-product ? Я думаю, что это ваша проблема.

Ответ №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 не требуется.

Метки: