我正在尝试为顶部带有选择标记的移动设备创建一个页面,但是,这是我设法让它看起来像这样的唯一方式。
是通过在css中使用缩放选项,是否有人可以建议更好的方法来实现这一点并使选择标记居中?
编辑:我正在尝试将select标记居中,并在不使用zoom css选项的情况下使其更大。
答案 0 :(得分:0)
预览于:http://jsfiddle.net/tkon99/w7g65/
<强> HTML:强>
<p id="sorttext">Sort by:</p>
<div id="selectholder">
<select id="selector">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<强> CSS:强>
#selectholder{
text-align: center; /* centering select element */
position: relative; /* making it relative so the text is next to it */
top: -50px; /* value with which it's higher on the page than normal */
}
#selector{
height: 30px; /* height of the select element */
font-size: 25px; /* making font fill the element */
}
#sorttext{
font-size: 25px; /* font size of the text next to the select element */
}
答案 1 :(得分:0)
也许这会有所帮助:http://jsfiddle.net/thecbuilder/X5YLw/1/
<强> HTML 强>
<select class="center large">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<强>中心
.center {
display:block ;
margin-left:auto ;
margin-right:auto ;
}
<强>宽度/高度强>
.large{
height: 50px;
width:200px;
font-size: 28px;
}
答案 2 :(得分:0)
除移动设备的CSS外,<meta name="viewport" content="width=device-width, initial-scale=1">
非常重要:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document Title</title>
<meta name="description" content="Document Description">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.select-container {
font-size: 3em;
text-align: center;
}
.select-container select {
font-size: inherit;
}
</style>
<body>
<div class="select-container">
<label for="my-sort">Sort by:</label>
<select name="sort" id="my-sort">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</body>
</html>