浮動列表問題

Question

我正在創建一個5星評級的列表。我想從列表標題中放入星星，但我的星星沒有顯示在列表標題前面。

.cont { 
 
    color: #eee; 
 
    margin: 0 auto; 
 
    max-width: 350px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
hr { 
 
    margin: 20px; 
 
    border: none; 
 
    border-bottom: thin solid rgba(255, 255, 255, .1); 
 
} 
 
div.stars { 
 
    width: 270px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
input.star { 
 
    display: none; 
 
} 
 
label.star { 
 
    color: #444; 
 
    float: right; 
 
    font-size: 25px; 
 
    padding: 5px; 
 
    transition: all .2s; 
 
} 
 
input.star:checked ~ label.star:before { 
 
    content: '\f005'; 
 
    color: #FD4; 
 
    transition: all .25s; 
 
} 
 
input.star-5:checked ~ label.star:before { 
 
    color: #FE7; 
 
    text-shadow: 0 0 20px #952; 
 
} 
 
input.star-1:checked ~ label.star:before { 
 
    color: #F62; 
 
} 
 
label.star:hover { 
 
    transform: rotate(-15deg) scale(1.3); 
 
} 
 
label.star:before { 
 
    content: '\f006'; 
 
    font-family: FontAwesome; 
 
} 
 
/* LIST #3 */ 
 

 
#list3 { 
 
    float: left; 
 
} 
 
#list3 ul { 
 
    list-style-image: url("../images/arrow.png"); 
 
    color: #4B4B4B; 
 
    font-size: 18px; 
 
    margin-left: 25px; 
 
} 
 
#list3 ul li { 
 
    line-height: 30px; 
 
}

<div id="list3"> 
 
    <ul> 
 
    <li>Estimated time: 43min</li> 
 
    <li>Distance in miles: 14 miles</li> 
 
    <li>Review Rating: 
 
     <div class="cont"> 
 
     <div class="stars"> 
 
      <form action=""> 
 
      <input class="star star-5" id="star-5-2" type="radio" name="star" /> 
 
      <label class="star star-5" for="star-5-2"></label> 
 
      <input class="star star-4" id="star-4-2" type="radio" name="star" /> 
 
      <label class="star star-4" for="star-4-2"></label> 
 
      <input class="star star-3" id="star-3-2" type="radio" name="star" /> 
 
      <label class="star star-3" for="star-3-2"></label> 
 
      <input class="star star-2" id="star-2-2" type="radio" name="star" /> 
 
      <label class="star star-2" for="star-2-2"></label> 
 
      <input class="star star-1" id="star-1-2" type="radio" name="star" /> 
 
      <label class="star star-1" for="star-1-2"></label> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

試試這個：http://codepen.io/g1un/pen/KgvrwZ

.cont { 
    color: #eee; 
    margin: 0 auto; 
    max-width: 350px; 
    overflow: hidden; 
    padding: 0; 
    text-align: center; 
/* width: 100%; */ 

    display: inline-block; 
    vertical-align: top; 
} 

div.stars { 
/* width: 270px; */ 
    display: inline-block; 
/* float: left; */ 
} 

您導致出現的標題下方的等級圖標主要錯誤是評價塊具有display: block;屬性默認爲div和你沒有改變它。
也不需要在width: 100%，導致元素跳轉到另一行以適應此屬性。