Question

我正在尝试为顶部带有选择标记的移动设备创建一个页面，但是，这是我设法让它看起来像这样的唯一方式。

enter image description here

是通过在css中使用缩放选项，是否有人可以建议更好的方法来实现这一点并使选择标记居中？

编辑：我正在尝试将select标记居中，并在不使用zoom css选项的情况下使其更大。

Answer 1

<强> 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 */
}

Answer 2

也许这会有所帮助：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;
}

Answer 3

除移动设备的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>

选择标签移动屏幕

3 个答案: