Question

我有一个包含表格的移动页面。我需要对齐select和input / textarea并使它们具有相同的大小，但它不能正常工作。（见图）

enter image description here

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

<?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>

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

Answer 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％对齐，但它非常接近。

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

1 个答案: