正確右對齊一個切換及其標籤

下面的代碼顯示切換描述（左），撥動其標籤（在右邊）：

<html> 
    <head> 
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css"> 
    </head> 
    <body class="ms-font-m"> 
    <div class="padding"> 
    <div class="ms-Toggle"> 
     <span class="ms-Toggle-description" style="display:inline; float:left;"><font size="3">Activate/Deactivate</font></span> 
     <input type="checkbox" id="toggle" class="order ms-Toggle-input"> 
     <label for="toggle" class="order ms-Toggle-field" style="display:inline; float:right;"> 
     <span class="order ms-Label ms-Label--off">Off</span> 
     <span class="order ms-Label ms-Label--on">On</span> 
     </label> 
    </div> 
    </div> 
    </body> 
</html>

這裏是JS Bin。

但是，我們可以看到，從JS斌的輸出，標籤（即off或on）有過去的右邊框：

有誰知道什麼是正確的方式使切換和其標籤right aligned？

PS：我曾嘗試在中添加margin-right: 40px;，它的確有幫助。然而，我真的想避免不斷的px，並找到一個很好的解決方案，確切的right-aligned。

來源

2016-06-09 SoftTimur

對於那些投了「關閉」......爲什麼？ – SoftTimur

可能是因爲*尋求調試幫助的問題（「**爲什麼不是這個代碼工作？」）必須包括所需的行爲，特定的問題或錯誤以及在問題本身中重現**的最短代碼* *。沒有**明確問題陳述**的問題對其他讀者沒有用處。請參閱：如何創建[mcve]。*但我可能是錯的。 –

那麼，我的問題是**如何**問題，而不是調試（不需要顯示很多的代碼不能解決這個問題）。我的聲明和JSBin對於這個問題本身已經足夠清楚了...... – SoftTimur

，你有這裏的問題是，你正在使用，增加了保證金到您的元素和「CSS代碼（fabric.components.min.css）推「他們在他們的容器元素之外。

爲了「修理」這個你可以添加這些元素相反的保證金（將其移動回原來的地方）：

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css"> 
 
    </head> 
 
    <body class="ms-font-m"> 
 
    <div class="padding"> 
 
    <div class="ms-Toggle"> 
 
     <span class="ms-Toggle-description" style="display:inline; float:left;"><font size="3">Activate/Deactivate</font></span> 
 
\t <input type="checkbox" id="toggle" class="order ms-Toggle-input"> 
 
\t <label for="toggle" class="order ms-Toggle-field" style="display:inline; float:right; margin-right: 17px"> 
 
\t  <span class="order ms-Label ms-Label--off">Off</span> 
 
\t  <span class="order ms-Label ms-Label--on">On</span> 
 
\t </label> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

，或使元素絕對定位的，相對於另一個容器元件：

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css"> 
 
    </head> 
 
    <body class="ms-font-m"> 
 
    <div class="padding"> 
 
    <div class="ms-Toggle" style="position: relative";> 
 
     <div style="position: absolute; left: 0;"> 
 
      <span class="ms-Toggle-description" style=""><font size="3">Activate/Deactivate</font></span> 
 
     </div> 
 
     <div style="width: 90px; position: absolute; right: 0;"> 
 
       <input type="checkbox" id="toggle" class="order ms-Toggle-input"> 
 
       <label for="toggle" class="order ms-Toggle-field" style=""> 
 
       <span class="order ms-Label ms-Label--off">Off</span> 
 
       <span class="order ms-Label ms-Label--on">On</span> 
 
       </label> 
 
      </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

請注意，即使您使用了絕對位置 - 您仍然必須給出正確的容器寬度，以便將其保留在視口內。

來源

2016-06-12 01:48:42 Dekel

添加顯示：內嵌在你的CSS

  <span style="display:inline" class="ms-Toggle-description">

來源

2016-06-09 21:07:44

codepen url - http://codepen.io/nagasai/pen/yJeXRp僅供參考 –

「右對齊」複選框和標籤怎麼樣？ – SoftTimur

..檢查codepen url中更新的代碼 –

正確右對齊一個切換及其標籤

回答

相關問題