我有以下代码用于列出链接列表:
class TelaWebState extends State<MyHomePage> {
WebViewController _controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Help')),
body: WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_loadHtmlFromAssets();
},
),
);
}
_loadHtmlFromAssets() async {
String fileText = await rootBundle.loadString('assets/index.html');
_controller.loadUrl( Uri.dataFromString(
fileText,
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString());
}
}
如何正确垂直对齐列?
答案 0 :(得分:2)
我将进行重组,并执行以下操作,其中有一个外部flex div,其中有子级为flex-column的子代,因此信息将变为垂直而不是默认水平。
请注意,包含小时的第二个div需要将div包裹在小时和随附的跨度上,因为有多个子元素。将它们包装在div中可以使第二个d-flex
div的直接子对象正确包装它们
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Hours</h3>
<div class="d-flex hours-display pb-2">
<div class="d-flex flex-column">
<span class="mr-2"><strong>Mon</strong></span>
<span class="mr-2"><strong>Tue</strong></span>
<span class="mr-2"><strong>Wed</strong></span>
</div>
<div class="d-flex flex-column">
<div>
<span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
</div>
<div>
<span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
</div>
<div>
<span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
</div>
</div>
<div class="d-flex flex-column">
<a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="0 0930 2300">
<a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="1 0930 2300">
<a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="2 0930 2300">
</div>
</div>