Question

（我在Naga Sai A的评论之后重新编辑了这个问题）

以下代码在一行中显示切换说明（左侧），切换及其标签（右侧）：

<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>

这是List::MoreUtils。

但是，我们可以看到，从JS Bin的输出来看，标签（即off或on）已越过右边界：

JS Bin

有谁知道切换及其标签的正确方法是什么？right aligned？

PS：我尝试在margin-right: 40px;中添加style="display:inline; float:right;"，但确实有帮助。但是，我真的希望避免常数px，并为精确right-aligned找到一个好的解决方案。

Answer 1

在CSS中添加display：inline

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

Answer 2

你在这里遇到的问题是你使用的是一个css代码（fabric.components.min.css），它为你的元素添加了边距，并且＆＃34; push＆＃34;它们在容器元素之外。

为了修复＆＃34;这可以将这些元素添加到相反的边距（将它们移回原来的位置）：

＆＃13;

<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; margin-right: 17px">
	    <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>

＆＃13;

或者使元素相对于另一个容器元素绝对定位：

＆＃13;

<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>

＆＃13;

请注意，即使您使用了绝对位置 - 您仍然必须为正确的容器提供宽度以便保持其内部＆＃34;内部＆＃34;你的视口。

正确地右对齐切换及其标签

2 个答案: