猿问

如何使用 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:&nbsp;

        <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>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">&nbsp; &nbsp; <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">&nbsp; &nbsp; <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>&nbsp; &nbsp; <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script></head><body>&nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; Label for select:&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <ons-select id="any_id" modifier="material">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">Value 0</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">Value 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">Value 2</option>&nbsp; &nbsp; &nbsp; &nbsp; </ons-select>&nbsp; &nbsp; </div></body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答