Вопрос с плавающим списком

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%, что приводит к тому, что элемент переходит в другую строку, чтобы соответствовать этому свойству.