我有這個 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。我怎樣才能讓它們顯示在一行上？
1 回答
桃花長相依
TA貢獻1860條經驗 獲得超8個贊
使用 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>
- 1 回答
- 0 關注
- 115 瀏覽
添加回答
舉報
0/150
提交
取消