CSS Display: Inline Block Issue

Question

Так что я не уверен, что я делаю неправильно здесь, в основном, я использую этот HTML:

<p class="cl"> 
    <input type="radio" name="number" value="1">1</p> 
<p class="cl price">someth</p> 
<p class="cl"> 
    <input type="radio" name="number" value="2">2</p> 
<p class="cl price">other</p> 

и этот CSS:

.price 
{ 
    float: right; 
} 
.cl 
{ 
    display: inline-block; 
    margin-top: 0; 
    margin-bottom: 0; 
    margin: 5px; 
} 

В основном то, что происходит что я хочу 1 вещь перед другой, и этого не происходит, однако, если я поставлю div в середине теоретических строк, они будут работать по назначению.

Fiddle

Answer 1

Проблема заключается в том, что вы не набор линий. Если вы мужеского пола ДИВ на линию он будет работать:

<div class="price-line"> 
    <p class="cl"> 
     <input type="radio" name="number" value="1">1</p> 
    <p class="cl price">someth</p> 
<div> 
<div class="price-line"> 
    <p class="cl"> 
     <input type="radio" name="number" value="2">2</p> 
    <p class="cl price">other</p> 
<div> 

И КЕС все та же:

.price{ 
    float: right; 
} 
.cl{ 
    display: inline-block; 
    margin-top: 0; 
    margin-bottom: 0; 
    margin: 5px; 
}; 

Хорошего дня;) Ps: вы можете использовать DIV или что-нибудь еще что занимает 100% от ширины, я думаю;)

Answer 2

Это как это вы хотите ?, или должны быть заменены текст/радио?

.price 
 
{ 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
} 
 
.cl 
 
{ 
 
} 
 
.cl2 .price 
 
{ 
 
    float: right 
 
}

<div class="cl"> 
 
    <input type="radio" name="number" value="1">1 
 
    <div class="cl price">someth</div> 
 
</div> 
 
<div class="cl"> 
 
    <input type="radio" name="number" value="2">2 
 
    <div class="cl price">other</div> 
 
</div> 
 

 
<br />And here they are all the way to the right<br /><br /> 
 

 
<div class="cl2"> 
 
    <input type="radio" name="number" value="1">1 
 
    <div class="cl price">someth</div> 
 
</div> 
 
<div class="cl2"> 
 
    <input type="radio" name="number" value="2">2 
 
    <div class="cl price">other</div> 
 
</div>