我试图使文本显示为与复选框内联的 block ，并取决于侧边栏的宽度。
例子
我已将代码粘贴到 CodePen(请记住屏幕分辨率/宽度等)，我尝试了多次尝试，甚至从 更改为 以及将内联样式设置为“向左浮动”。要从更改为可以在“this.
”下的 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
};
});
最佳答案
尝试使用 display:flex 将 twisty、checkbox 和 label 包装在一个容器中，并将 ivh-treeview-children 指令作为该容器的兄弟。
更新代码笔: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>
结果截图:
关于javascript - HTML/CSS 复选框文本与 <span> 或 <div> 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56905794/