Выбор мобильных форм отличается от размера ввода или текстовой области - PullRequest
Новая
       14

Выбор мобильных форм отличается от размера ввода или текстовой области

2 голосов
/ 22 сентября 2011

У меня есть мобильная страница, включая форму.Мне нужно выровнять 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>

Что я делаю не так или что мне делать?

1 Ответ

5 голосов
/ 24 сентября 2011

Вот что вам нужно сделать: 

<?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%, но оно довольно близко.

...