I have this HTML snippet:
<!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>
Which produces this:
As you can see, the text is not properly aligned with ons-select
. How can I make them display on one line?
use flexbox for this type of thing. Very easy to implement.
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>