兩個標籤中的一個DIV，但不能在同一行

Question

我的代碼是這樣的：

<div data-role="content" class="ui-content" id="jobModuleContent"> 
     <div id="jmc_cJobNr"></div> 
    </div> 

與ID jmc_cJobNr股利應該有兩個<label> S，一個在左邊，另一個在右邊。我認爲解決方案可能會處理與style="text-align:left/right"元素。它可以工作，但不是它應該的方式，因爲一個標籤在div中佔據整行，另一個標籤在下面。

任何建議如何解決這個問題？

Answer 1

你可以像這樣浮動每個div。

.label { 
    float: left; 
    width: 50%; 
} 

.label--right { 
    text-align: right; 
} 

<div data-role="content" class="ui-content" id="jobModuleContent"> 
    <div id="jmc_cJobNr"> 
     <div class="label">Label one</div> 
     <div class="label label--right">Label two</div> 
    </div> 
</div> 

You can see in this fiddle

Answer 2

這裏有浮動小提琴左右浮動右： http://jsfiddle.net/rmzhyan3/

.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

Answer 3

label { 
    display: inline-block; 
    width: 45%; 

} 
.align--right { 
    text-align: right; 
} 

<div data-role="content" class="ui-content" id="jobModuleContent"> 
    <div id="jmc_cJobNr"> 
     <label>Label one</label> 
     <label class="align--right">Label two</label> 
    </div> 
</div>