使用<span>或的</span> HTML / CSS復選框文本對齊<div>

Question

我試圖使文本顯示為與復選框內聯並取決於邊欄的寬度的塊。

例

我已將代碼粘貼到CodePen上（請牢記屏幕分辨率/寬度等），我嘗試了多次嘗試，甚至從更改為，以及使用“向左浮動” 插入行內樣式。 要從更改為，可以在javascript中的“此。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
   <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
  <link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.css">
  <link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview-theme-basic.css">
</head>
<body ng-app="bin">

  <div ng-controller="DemoCtrl as demo">
    <h3>Custom Node Templates</h3>
    <div style=width:224px>
      <div ivh-treeview="demo.stuff"
           ivh-treeview-node-tpl="demo.tpl"
           ivh-treeview-options="demo.customTreeViewOpts">
      </div>
    </div>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
  <script src="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.js"></script>
</body>
</html>

var stuff = [
   {
                label: "Sales",
                selected: false,
                children: [
                  {
                    label: "Sales Program",
                    selected: false,
                    children: [
                      {
                        label: "Commercial Dealer Fleet Program",
                        selected: false
                      },
                      {
                        label: "Courtesy Car Program",
                        selected: false
                      },
                      {
                        label: "VIP & Employee Purchase Program",
                        selected: false
                      },
                      {
                        label: "Policies",
                        selected: false
                      }
                    ]
                  },
                  {
                    label: "Customer Rebate Programs",
                    selected: false,
                    children: [
                      {
                        label: "Commercial Dealer Fleet Program",
                        selected: false
                      },
                      {
                        label: "Courtesy Car Program",
                        selected: false
                      },
                      {
                        label: "VIP & Employee Purchase Program",
                        selected: false
                      },
                      {
                        label: "Policies",
                        selected: false
                      }
                    ]
                  }
                ]
              },
              {
                label: "Fleet",
                selected: false
              }
];

var app = angular.module('bin', ['ivh.treeview']);

app.config(function(ivhTreeviewOptionsProvider) {


 ivhTreeviewOptionsProvider.set({
   defaultSelectedState: false,
   validate: true,
   expandToDepth: -1
 });
});


app.controller('DemoCtrl', function() {
  this.stuff = stuff;

  this.tpl = `
  <div title="{{trvw.label(node)}}" >       
    <span ivh-treeview-toggle >
      <span ivh-treeview-twistie>
      </span>
    </span>
    <span ng-if="trvw.useCheckboxes()" ivh-treeview-checkbox  >
    </span>
    <span class="ivh-treeview-node-label" ivh-treeview-toggle   >
    {{trvw.label(node)}}
    </span>
    <div ivh-treeview-children></div>
  </div>`

  this.customTreeViewOpts = {
    // useCheckboxes: false
    // twistieLeafTpl: ""
    twistieExpandedTpl: '<span class="fas fa-minus-square"></span>',
    twistieCollapsedTpl: '<span class="fas fa-plus-square"></span>',
    twistieLeafTpl: '<span class="fas fa-minus-square" style=" visibility: hidden;"></span>'
    // nodeTpl: "..."
    // onToggle: this.awesomeCallback
  };
});

Answer 1

一種方法是在節點包裝上添加一些填充，並在復選框內容上使用負邊距進行調整。 我在外部div（.tree-node-adjusted）中添加了一個包裝器（.tree-node-adjusted-wrapper）和一個類。 這種方法有點麻煩，可以計算px偏移量（ems或其他方式）或從字體大小中導出。

模板

  this.tpl = `
  <div title="{{trvw.label(node)}}" class="tree-node-adjusted" >  
    <div class="tree-node-adjusted-wrapper">
    <span ivh-treeview-toggle >
      <span ivh-treeview-twistie>
      </span>
    </span>
    <span ng-if="trvw.useCheckboxes()" ivh-treeview-checkbox  >
    </span>
    <span class="ivh-treeview-node-label" ivh-treeview-toggle   >
    {{trvw.label(node)}}
    </span>
    </div>
    <div ivh-treeview-children></div>
  </div>`

CSS（在我的Codepen示例中為LESS）：

.ivh-treeview .tree-node-adjusted {

  .tree-node-adjusted-wrapper {
    padding-left: 40px;

    & > span:nth-child(1) {
      margin-left: -40px;
    }
  }
}

參見Codepen中的示例

（另一種解決方案可能是使用一些左側填充使節點相對位置，並絕對定位復選框，這可能會更精確）。

Answer 2

嘗試將具有扭曲感的復選框和標簽包裝在帶有display:flex的容器中，並將ivh-treeview-children指令保留為該容器的兄弟。

更新的Codepen： https ://codepen.io/jtrussell/pen/qzQNdm ? editors = 0010

更新了節點模板代碼段：

<div title="{{trvw.label(node)}}">       
  <div style="display:flex">
    <span ivh-treeview-toggle >
      <span ivh-treeview-twistie>
      </span>
    </span>
    <span ng-if="trvw.useCheckboxes()" ivh-treeview-checkbox  >
    </span>
    <span class="ivh-treeview-node-label" ivh-treeview-toggle>
    {{trvw.label(node)}}
    </span>
  </div>
  <div ivh-treeview-children></div>
</div>

結果截圖：

使用<span>或的</span> HTML / CSS復選框文本對齊<div>

問題描述

2 個解決方案

解決方案1
0 2019-07-06 18:50:06

解決方案2
0 已采納 2019-07-08 15:40:59

使用<span>或的</span> HTML / CSS復選框文本對齊<div>

問題描述

2 個解決方案

解決方案1 0 2019-07-06 18:50:06

解決方案2 0 已采納 2019-07-08 15:40:59

解決方案1
0 2019-07-06 18:50:06

解決方案2
0 已采納 2019-07-08 15:40:59