Mobile Forms Select 与 Input 或 textarea 的大小不同答案

【问题标题】：Mobile Forms Select is not the same size as Input or textareaMobile Forms Select 与 Input 或 textarea 的大小不同
【发布时间】：2011-11-23 03:04:13
【问题描述】：

我有一个包含表单的移动页面。我需要对齐选择和输入/文本区域并使它们的大小相同，但它不能正常工作。（见图）

正如您在屏幕截图中看到的那样，下拉菜单的大小与输入或文本区域的大小不同。这是我的代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>

<style type="text/css">

  select, input, textarea {
    border: solid 0.1em black;
    font: normal 1.5em Arial;
    margin: 0.3em 0;
    padding: 0.2em;
  }

  .em { width: 11em; }
  .px { width: 150px; }
  .percent { width: 50%; }

</style>

<select name="option1" class="em">
  <option value="" selected="">= choose =</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input name="input" type="text" value="" class="em" />
<textarea class="em"></textarea>

<hr />

<select name="option1" class="px">
  <option value="" selected="">= choose =</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input name="input" type="text" value="" class="px" />
<textarea class="px"></textarea>

<hr />

<select name="option1" class="percent">
  <option value="" selected="">= choose =</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input name="input" type="text" value="" class="percent" />
<textarea class="percent"></textarea>

</body>
</html>

我做错了什么或者我应该怎么做？

【问题讨论】：

标签： css mobile width

【解决方案1】：

这是你必须做的：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>

<style type="text/css">
body {
  margin: 0;
  padding: 0.3em;
}
form {
  padding: 0px;
  margin: 0px;
}
select, input,textarea {
  border: solid 1px #888;
  display: block;
  font: normal 1.4em Arial;
  max-width: 100% !important;
  margin: 0.2em 0 !important;
  padding: 0.1em 0 !important;
  text-indent: 0 !important;
  white-space: nowrap;
  text-overflow:ellipsis;
  width: 98% !important;
  outline: none;
  word-wrap: break-word;
  word-wrap: break-all;
  white-space: nowrap;
  ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
  box-sizing:content-box; 
}
</style>

<form>
  <select name="option1" class="em">
    <option value="" selected="">= choose =</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input name="input" type="text" value="" />
  <input name="input" type="email" value="" />
  <input name="input" type="url" value="" />
  <input name="input" type="tel" value="" />
  <textarea class="em"></textarea>
</form>

</body>
</html>

选择框不是 100% 对齐，但非常接近。

【讨论】：

谢谢，是的，选择有点不对，但对我有用。
我建议使用：box-sizing:content-box; -ms-box-sizing：内容框； -moz-box-sizing：内容框； -webkit-box-sizing：内容框；在“输入、选择、文本区域”中也是如此