悬停时无法在同一行上对齐项目

问题描述

我遇到一个设计问题。我想创建一个将在悬停时扩展并显示一些评分选项的div。到目前为止，我已经可以设计基本布局，但是无法使其正常工作。正如您可以参考此gif图像和代码一样，该设计已损坏。谁能帮我解决此问题？

我忘了提一点，我需要使这种设计对小屏幕设备具有响应性，正如您在我的CSS中所看到的那样，我在px中使用了一些值，这不是一个好方法。在这些方面，我也需要一些建议。

注意-我将在我仅共享设计部分的reactJs项目中使用此布局，并且在gif图像上可以看到一个滑块，该滑块是我使用reactJs包创建的，可以正常工作。但是我对这种星级评价设计有疑问。

Gif image showing the design break

/* CSS Variable Declaration */
:root {
    --main-theme-blue-color: #2D62A6;
    --main-theme-darkblue-color :#184279;
    --main-theme-white-color: #FFFFFF;
    --main-theme-gray-color: #9E9E9E;
    --theme-text-color: #3A3A3A;
    --font-weight-600: 600;
    --font-weight-500: 500;
    --font-weight-400: 400;
    --font-weight-300: 300;
    --hero-Box-heading: 2rem;
    --main-heading: 1.5rem;
    --vertical-card-height: 300px;
    --horizontal-card-height: 180px;
    --iceberg-blue: #A9E3F0;
    --orange-colour: #F2911C;
    --font-size-90per: 90%;
    --font-size-80per: 80%;
    --strike-price: #FF005E;
}

/* CSS filter section */
.hotel-filter-heading {
    font-size: var(--main-heading);
    font-weight: var(--font-weight-600);
    line-height: 30px;
}

.hotel-filter-description {
    display: block;
    top: 4.6rem;
    font-weight: 500;
    color: var(--theme-text-color);
}

.price-filter,.pay-later-filter,.type-of-property {
    display: inline-block;
    line-height: 20px;
    color: var(--main-theme-blue-color);
    font-size: var(--font-size-90per);
    font-weight: var(--font-weight-500);
    padding: 0.1rem 1rem;
    border-radius: 16px;
    border: 2px solid var(--main-theme-blue-color);
}

.price-filter:hover,.pay-later-filter:hover,.type-of-property:hover {
    cursor: pointer;
}

.grow-price-slider {
    display: inline-flex;
    align-items: center;
    justify-content: left;
    width: 71px;
    transition: width 500ms ease-in-out;
}

.grow-price-slider .price-slider-bar {
    display: none;
    width: 0px;
    transition: width 500ms ease-in-out;
}

.grow-price-slider:hover {
    width: 188px;
}

.grow-price-slider:hover .price-slider-bar {
    display: inline-block;
    width: 100px;
}

.price-slider-bar .rc-slider-track {
    background-color: var(--main-theme-blue-color);
}

.price-slider-bar .rc-slider-handle {
    border-color: var(--main-theme-blue-color);
}

.grow-type-property {
    width: 153px;
    transition: width 500ms ease-in-out;
}

.grow-type-property .type-property-slider {
    display: none;
    width: 0px;
    transition: width 500ms ease-in-out;
}

.grow-type-property:hover {
    width: 400px;
}

.grow-type-property:hover .type-property-slider {
    display: inline-block;
    width: 247px;
}

.star-ratings {
    margin: 0rem 0.5rem;
}

.star-ratings i {
    margin: 0rem 0.1rem;
}

.three-star-color {
    color: #73BF9B;
}

.four-star-color {
    color: #0FA0BF;
}

.five-star-color {
    color: #F2C71C;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-4">
  <div class="row">
    <div class="col-md-12">
      <div class="hotel-filter-heading">Hotels in Kolkata</div>
      <div class="hotel-filter-description">Showing Results for 15 September to 18 September</div>
    </div>
  </div>

  <div class="row mt-4 mb-0">
    <div class="col-md-12">
      <span class="pay-later-filter mr-2">Pay Later</span>
      <span class="type-of-property grow-type-property">Type of Property
        <span class="type-property-slider">
          <span class="star-ratings">
            <i class="fa fa-star three-star-color" aria-hidden="true"></i>
            <i class="fa fa-star three-star-color" aria-hidden="true"></i>
            <i class="fa fa-star three-star-color" aria-hidden="true"></i>
          </span>

          <span class="star-ratings">
            <i class="fa fa-star four-star-color" aria-hidden="true"></i>
            <i class="fa fa-star four-star-color" aria-hidden="true"></i>
            <i class="fa fa-star four-star-color" aria-hidden="true"></i>
            <i class="fa fa-star four-star-color" aria-hidden="true"></i>
          </span>

          <span class="star-ratings">
            <i class="fa fa-star five-star-color" aria-hidden="true"></i>
            <i class="fa fa-star five-star-color" aria-hidden="true"></i>
            <i class="fa fa-star five-star-color" aria-hidden="true"></i>
            <i class="fa fa-star five-star-color" aria-hidden="true"></i>
            <i class="fa fa-star five-star-color" aria-hidden="true"></i>
          </span>
        </span>
      </span>
    </div>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

hover html