html - CSS 位置未按预期工作。如何解决？

标签 html css

在这个代码块中有一个 div 代表评级值和计数。我分别使用 span 作为属性和类 rating-pill 和 map-item__rat-overall。两个跨度不在同一行中。我希望我的 span 属性如图所示工作。我试过了，但没有按预期工作。我该如何解决这个问题？

.map-item{
    width: 320px;
    height: 168px;
    padding: 8px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.map-item__close{
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  top: 6px;
  opacity: .5;
  right: 5px;
}
.pointer{
  cursor: pointer;
}
.btn--reset{
  padding: 0;
  border: 0;
  background-color: transparent;
}
.icon-ic{
  background-repeat: no-repeat;
  background-position: 50%;
  line-height: 0;
  display: inline-block;
  text-indent: 0;
}
.visuallyhidden{
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width:1px;
  white-space: nowrap;
}
.map-item__gallery{
  cursor: pointer;
  position: relative;
  height: 100px;
  width: 100px;
  float: left;
}
.gm-style img{
  max-width: none;
}
.map-item__image{
  width: 100px;
  height: 100px;
}
.map-item__info{
  width: 196px;
  height: 100px;
  display: inline-block;
  margin-left: 8px;
}
.map-item__name{
  font-size: 13px;
  margin: 2px 0 8px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #37454d;
}
.map-item__stars{
  vertical-align: middle;
  margin-right: 6px;
}
.map-item__type{
  vertical-align: middle;
  display: inline-block;
  width: 100px;
  font-size: 12px;
  line-height: 1;
}
.map-item__rat{
  margin-top: 8px;
  height: 26px;
}
@media only screen and (min-width: 980px) {
  .rating-pill{
    -webkit-flex: 0 0 30px;
    flex: 0 0 30px;
  }
}
.rating-pill{
  margin-right: 8px;
  display: inline-block;
  width: 30px;
  height: 18px;
  border-radius: 18px;
}
.rating-pill--color-4{
  background-color: #428500;
}
.rating-pill__value{
  font-size: 12px;
  padding: 2px 0;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  display: block;
}
.map-item__rat-count{
  width: 156px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  color: #37454d;
}
.map-item__rat-overall{
  font-size: 12px;
  margin-right: 0;
}
.map-item__callout{
  margin-top: 12px;
  width: 100%;
  cursor: pointer;
  display: -webkit-flex !important;
  display: flex !important;
}
.fl-trailing{
  float: right;
}
.map-item__deal{
  height: 40px;
  width: 50%;
}
.fl-leading{
  float: left;
}
.map-item__deal-partner{
  display: block;
  font-size: 12px;
  padding-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.font-trv-maincolor-04-light{
  color: #697379;
}
.map-item__deal-min{
  font-size: 18px;
  color: #428500;
}
.fw-bold{
  font-weight: 700;
}
.map-btn__deal{
  height: 36px;
  width: 50%;
  padding: 0;
  border-radius: 2px;
  border: 1px solid #316300;
  border-width: 0 0 1px;
  background-color: #428500;
  color: #fff;
  font-size: 12px;
  position: relative;
  outline: none;
}
.label__view{
  margin: 3px 0 1px;
}
.label{
  display: inline-block;
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
}
.map-btn__deal-ic{
  width: 5px;
  height: 9px;
  margin-left: 16px;
}
.inline-block{
  display: inline-block;
}
.icon-ic{
  background-repeat: no-repeat;
  background-position: 50%;
  line-height: 0;
  text-indent: 0;
}
.icon-ic>svg{
  pointer-events: none;
}
svg:not(:root){
  overflow: hidden;
}
svg{
  outline-width: 0;
}
<div style="position: absolute; z-index: 107; width: 100%;">
   <div style="position: absolute; z-index: 500;">
      <div class="map-item" data-item="4725022">
         <button class="map-item__close pointer btn--reset" id="popup-close-btn" data-actions="close">
            <span class="icon-ic">
               <svg xmlns="http://www.w3.org/2000/svg" focusable="false" tabindex="-1" width="12" height="12" viewBox="0 0 12 12">
                  <path class="svg-color--primary" fill="#697379" d="M7.414 6l4.293-4.293C11.903 1.51 12 1.257 12 1s-.097-.512-.293-.707c-.39-.39-1.023-.39-1.414 0L6 4.586 1.707.293c-.39-.39-1.023-.39-1.414 0C.097.488 0 .743 0 1s.097.512.293.707L4.586 6 .293 10.293C.097 10.488 0 10.743 0 11s.097.512.293.707S.743 12 1 12s.512-.097.707-.293L6 7.414l4.293 4.293c.195.195.45.293.707.293s.512-.097.707-.293S12 11.257 12 11s-.097-.512-.293-.707L7.414 6z"></path>
               </svg>
            </span>
            <span class="visuallyhidden">Close</span>
         </button>
         <div class="map-item__gallery">
            <img class="map-item__image pointer" src="//imgcy.trivago.com/c_lfill,d_dummy.jpeg,f_auto,h_225,q_auto:eco,w_225/itemimages/47/25/4725022_v1.jpeg" data-actions="openGallery">
            <button class="map-item__image-ph hidden-phone btn--reset" data-actions="openGallery" type="button">
               <span class="icon-ic map-item__gal-ic">
                  <svg xmlns="http://www.w3.org/2000/svg" focusable="false" tabindex="-1" width="22" height="22" viewBox="0 0 22 22">
                     <g class="svg-color--primary" fill="#FFF">
                        <path d="M21.978 10.69c0-.01 0-.02-.01-.032-.012-.088-.023-.176-.056-.264-.055-.198-.143-.385-.242-.56-.055-.067-.11-.144-.165-.21-.396-.506-1.012-.825-1.705-.825H7.7c-1.21 0-2.2.99-2.2 2.2v8.8c0 .12.01.23.032.34.01.09.02.177.055.265.055.198.143.385.242.56.054.067.11.144.164.21C6.39 21.68 7.006 22 7.7 22h12.1c.132 0 .275-.01.407-.044.11-.01.22-.044.33-.088.01 0 .033-.01.044-.01.122-.045.232-.1.342-.166.066-.033.12-.077.176-.12.01-.012.022-.012.022-.023.44-.33.76-.815.847-1.387.01-.044.022-.088.022-.143.01-.077.01-.143.01-.22V11c0-.11-.01-.21-.022-.31zm-6.58 2.465c.023-.583.507-1.056 1.1-1.056.33 0 .628.142.826.373.176.198.275.45.275.726 0 .604-.496 1.1-1.1 1.1-.606 0-1.1-.496-1.1-1.1v-.045zM20.9 19.8c0 .605-.495 1.1-1.1 1.1H7.7c-.386 0-.727-.198-.925-.506-.11-.176-.176-.374-.176-.594v-1.067l4.377-4.368 4.015 4.004c.21.22.56.22.77 0L20.9 13.23V19.8z"></path>
                        <path d="M6.786 7.83c.286-.087.594-.13.913-.13h5.62l2.244-3.566.803 3.565h1.122l-1.343-5.985C15.883.538 14.695-.21 13.517.055L1.715 2.714C.537 2.99-.21 4.168.054 5.355l1.605 7.108.33 1.474c.02.11.054.198.087.297.143.385.385.704.704.935.44.362 1.024.538 1.618.472V14.52h-.022c-.374.088-.748-.033-1.012-.286-.143-.143-.253-.33-.297-.54l-.242-1.044 3.312-5.225.65.406zm3.97-4.51c.595-.132 1.178.242 1.32.836.133.594-.24 1.177-.835 1.32-.593.132-1.176-.242-1.32-.836-.13-.593.243-1.177.837-1.32z"></path>
                     </g>
                  </svg>
               </span>
               <span class="visuallyhidden">View full-screen gallery</span>
            </button>
         </div>
         <div class="map-item__info">
            <h3 dir="auto" class="map-item__name" title="OYO 5054 Sun-N-Step Club">OYO 5054 Sun-N-Step Club</h3>
            <div class="map-item__stars inline-block clearfix">
               <span class="icon-ic map-item__stars-star">
                  <svg xmlns="http://www.w3.org/2000/svg" focusable="false" tabindex="-1" width="12" height="12" viewBox="0 0 12 12">
                     <path class="svg-color--primary" fill="#F6AB3F" d="M11.988 5.21c-.052-.275-.27-.488-.545-.534l-3.604-.6L6.63.455C6.542.184 6.287 0 6 0s-.542.184-.632.456L4.16 4.076l-3.603.6c-.275.046-.493.26-.545.533-.052.273.072.55.312.695L3.2 7.63l-1.165 3.493c-.093.28.01.59.25.758.115.08.25.12.382.12.148 0 .295-.05.416-.146L6 9.52l2.917 2.333c.12.098.27.147.416.147.133 0 .267-.04.38-.12.244-.17.346-.478.252-.758L8.8 7.63l2.876-1.725c.24-.144.364-.422.312-.696z"></path>
                  </svg>
               </span>
               <span class="icon-ic map-item__stars-star">
                  <svg xmlns="http://www.w3.org/2000/svg" focusable="false" tabindex="-1" width="12" height="12" viewBox="0 0 12 12">
                     <path class="svg-color--primary" fill="#F6AB3F" d="M11.988 5.21c-.052-.275-.27-.488-.545-.534l-3.604-.6L6.63.455C6.542.184 6.287 0 6 0s-.542.184-.632.456L4.16 4.076l-3.603.6c-.275.046-.493.26-.545.533-.052.273.072.55.312.695L3.2 7.63l-1.165 3.493c-.093.28.01.59.25.758.115.08.25.12.382.12.148 0 .295-.05.416-.146L6 9.52l2.917 2.333c.12.098.27.147.416.147.133 0 .267-.04.38-.12.244-.17.346-.478.252-.758L8.8 7.63l2.876-1.725c.24-.144.364-.422.312-.696z"></path>
                  </svg>
               </span>
               <span class="icon-ic map-item__stars-star">
                  <svg xmlns="http://www.w3.org/2000/svg" focusable="false" tabindex="-1" width="12" height="12" viewBox="0 0 12 12">
                     <path class="svg-color--primary" fill="#F6AB3F" d="M11.988 5.21c-.052-.275-.27-.488-.545-.534l-3.604-.6L6.63.455C6.542.184 6.287 0 6 0s-.542.184-.632.456L4.16 4.076l-3.603.6c-.275.046-.493.26-.545.533-.052.273.072.55.312.695L3.2 7.63l-1.165 3.493c-.093.28.01.59.25.758.115.08.25.12.382.12.148 0 .295-.05.416-.146L6 9.52l2.917 2.333c.12.098.27.147.416.147.133 0 .267-.04.38-.12.244-.17.346-.478.252-.758L8.8 7.63l2.876-1.725c.24-.144.364-.422.312-.696z"></path>
                  </svg>
               </span>
            </div>
            <span class="map-item__type"></span>
            <div class="map-item__rat">
               <div class="rating-pill rating-pill--color-4"><span itemprop="ratingValue" class="rating-pill__value">8.3</span></div>
               <span class="map-item__rat-overall map-item__rat-count"><strong>Very good</strong><span> (838 reviews)</span></span>
            </div>
         </div>
         <div class="map-item__callout inline-block fl-trailing">
            <div class="map-item__deal fl-leading js_co_link" onclick="window.Clickout.shortClick(this);" data-id="ecc83429" data-co_params="{&quot;group&quot;:764,&quot;enc4&quot;:&quot;_pVgD-TjdbEgpkCh3Q3E3XDEvIFx7ch-tmUZ2T8HvrP0A6Rr8s-ct.Ntctk-xIgfazJY61rI0WW-pRyEJAlTh7YTKvU7oCe34eEhvQyFJbh2LPPlE8wIFh7TYQRiAuZsY1kmQZ9ivMMXHSsf81-jZeSadW6LNqX9CcokhH39kxRYOnqvX&quot;}" data-bestprice="3045" data-actions="priceClick" data-co_li_lo="1" data-co_ra_at="0" data-co_fr_ca="0"><span class="map-item__deal-partner font-trv-maincolor-04-light">Yatra</span><span class="map-item__deal-min fw-bold">₹3,045</span></div>
            <button class="map-btn__deal js_co_link" onclick="window.Clickout.shortClick(this);" data-id="ecc83429" data-co_params="{&quot;group&quot;:764,&quot;enc4&quot;:&quot;_pVgD-TjdbEgpkCh3Q3E3XDEvIFx7ch-tmUZ2T8HvrP0A6Rr8s-ct.Ntctk-xIgfazJY61rI0WW-pRyEJAlTh7YTKvU7oCe34eEhvQyFJbh2LPPlE8wIFh7TYQRiAuZsY1kmQZ9ivMMXHSsf81-jZeSadW6LNqX9CcokhH39kxRYOnqvX&quot;}" data-bestprice="3045" data-actions="dealClick" data-co_li_lo="1" data-co_ra_at="0" data-co_fr_ca="0">
               <span class="label label__view">View Deal</span>
               <span class="icon-ic map-btn__deal-ic inline-block icon-rtl fill-white">
                  <svg xmlns="http://www.w3.org/2000/svg" focusable="false" tabindex="-1" width="5" height="9" viewBox="0 0 5 9">
                     <path class="svg-color--primary" fill="#FFF" d="M1.444.245c.307.316 3.31 3.643 3.31 3.643.164.17.246.39.246.612 0 .222-.082.443-.246.61 0 0-3.003 3.328-3.31 3.645-.307.316-.86.338-1.188 0-.328-.337-.354-.81 0-1.223L3.01 4.5.257 1.468c-.354-.414-.328-.885 0-1.223.328-.337.88-.316 1.188 0z"></path>
                  </svg>
               </span>
            </button>
         </div>
      </div>
      <div></div>
   </div>
</div>

期望:

Expectation

最佳答案

替换你下面的 CSS 类

   .rating-pill{
      position:absolute;
      margin-right: 8px;
      display: inline-block;
      width: 30px;
      height: 18px;
      border-radius: 18px;
   }

关于html - CSS 位置未按预期工作。如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54490665/

上一篇：javascript - 仅在视口(viewport)中可见的元素上添加和删除 CSS 动画

下一篇：html - 动态缩放网页列表元素以具有 100% 的宽度和相等的缩放高度

相关文章：

html css div 元素没有按我的预期显示 - 按照教程

javascript - 将行从一个表复制到另一个表而不复制复选框

html - float 元素有上边距

javascript - 如何将搜索框链接到我页面上的网站？

html - 设置特定 html-class 时覆盖悬停伪类 CSS 属性

php - Mailjet剥离&lt;style&gt;标签，应用其自己的内联样式

javascript - 按钮宽度调整为窗口宽度(或包含 div)

javascript - 使用 javascript 的弹出窗口无法正确显示

html - 将单选按钮垂直放置在同一位置

html - 将背景图像缩放到文本列的高度

©2024 IT工具网  联系我们