html - 如果将<span>放在新行上，星星将改变位置

Closed. This question needs details or clarity。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？添加详细信息并通过editing this post阐明问题。
                        
                        2年前关闭。
                                                                                            
                
        
嗨，我有以下代码：

.fotoRating {
  color: #c5c5c5;
  font-size: 50px;
  position: relative;
  text-shadow: 0px 1px 0 #a2a2a2;
}

.fotoRating .selectedStars {
  color: #e7711b;
  position: absolute;
  top: 0;
  overflow: hidden;
}

<div class="fotoRating">
  <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>

  <div class="selectedStars" style="width:150px;">
    <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
  </div>
</div>

当我将span放在新行上时，星星将断开：http://jsfiddle.net/mozkomor05/6hkpj0L4/1/

我认为有一个小错误，但我找不到。

最佳答案

尽管@webdevdani方法有效，但不会产生相同的结果。这就是为什么我建议这样做：

.fotoRating span {
  display: table-cell;
}

这样，浏览器会认为它们是单元格，并忽略元素之间的空白，同时保留功能

在这里您可以：http://jsfiddle.net/6hkpj0L4/4/

关于html - 如果将<span>放在新行上，星星将改变位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47104304/