如何使用 ons-select 对齐文本？
我有这个 HTML 片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
</head>
<body>
<p>
Label for select:
<ons-select id="any_id" modifier="material">
<option value="0">Value 0</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</ons-select>
</p>
</body>
</html>
产生这个：
正如您所看到的，文本没有正确对齐ons-select。我怎样才能让它们显示在一行上？
侃侃无极浏览 91回答 1
1回答
-
桃花长相依
使用 flexbox 来处理这种类型的事情。非常容易实施。div{display:flex;align-items:center;}<html><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script></head><body> <div> Label for select: <ons-select id="any_id" modifier="material"> <option value="0">Value 0</option> <option value="1">Value 1</option> <option value="2">Value 2</option> </ons-select> </div></body></html>
随时随地看视频慕课网APP
相关分类
Html5