CSS对齐元素不起作用

Question

下午好！

我正在网站上创建一个小部件样式审核元素，我希望</a>标记和包含星级评分图像的跨度（如下所示）位于div的右侧。 </a>标记位于我想要的位置。我遇到的问题是如何将跨度放在它下面也是正确的。

  <div class="one-half last feedbackcompany review" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <h3>ONZE BEOORDELINGEN</h3>
    <p class="large-number">9</p>
    <p class="small-number">5</p>
    <a>Lees alle 1123 reviews</a>
    <span class="rating-stars-small stars"></span>
  </div>

我的CSS

.review {
    position: relative;
    width:100%;
    height:auto;
    color:black;
    background-color: rgba(255, 255, 255, 0.5);
    border-top: 10px solid #f05a28;
}

.review .stars {
    position: absolute;
    right: 10px;
}

.review .large-number {
    font-size: 55px;
    line-height: 54px;
    margin-bottom: 9px;
}

.review .small-number {
    font-size: 30px;
    line-height: 25px;
}
  .rating-stars-small {
  width: 100%; 
  height: 19px;
  display: block;
  background: url('../images/rating-stars-small.png') no-repeat left center;
  float: left;
  margin-bottom: 8px; 
  }

.review h3 {
    margin: 10px !important;
}

.review a {
    position: absolute;
    right: 10px;
    color:black;
}

.review p {
    float:left;
}

目前看起来像这样：

Answer 1

试试这个

.rating-stars-small { 
width: 100%;
height: 19px; 
display: inline-block;
background: url('../images/rating-stars-small.png') no-repeat leftcenter;
float: right;//or text align try out which is better
margin-bottom: 8px; 
}

Answer 2

将您的代码更改为：

.review a {
    position: relative;
    right: 10px;
    color:black;
}

和你的HTML：

    <div class="one-half last feedbackcompany review" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
        <h3>ONZE BEOORDELINGEN</h3>
        <p class="large-number">9</p>
        <p class="small-number">5</p>
        <div style="position:relative;float:right;">
            <a>Lees alle 1123 reviews</a>
            <span class="rating-stars-small stars">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
        </div>
    </div>

如果您想为2个或更多标签提供相同的定位，请将它们放入新标签中。如果你想要在你的下面，你必须以这种方式定位为亲戚，消耗它自己的位置，其他标签将自己放置。 我希望这可以帮助您使用代码。 抱歉aaaaaaa ...我没有你的形象，所以我用了aaaa ......而不是：）

Answer 3

你没有进行css调用来调整星星。尝试并在你的span标记内修复align ='right'。或者对.star {}进行CSS调用，并将对齐设置为右。