jQuery Mobile CSS 文本输入

Question

这是一个 JSFiddle：

http://jsfiddle.net/5Lz3zd9y/7/

HTML：

  <div class="ui-bar ui-bar-a ui-widget-content">dog</div>

<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="givenLettersMobile" type="text" value="e" disabled>
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">

<input type="text" value="sign in">

CSS：

.givenLettersMobile {
    width: 40px;
    height: 40px;
    text-align:center;
    font-style:italic;
    font-weight:bold;
    text-decoration:underline;
    line-height: 50%; 
}

.blankLettersMobile {
    width: 40px;
    height: 40px;
    text-align:center;
    font-style:italic;
    line-height: 50%;   
}

关于使用 JQuery Mobile 的 JSFiddle，我试图弄清楚如何让所有文本输入框从左到右对齐而不是从上到下堆叠，同时还试图减小文本输入框的宽度（不影响其他输入框的宽度，如用户名、密码等...）。更像是这些文本输入框在网站桌面版中的行为方式：

关于如何实现这一点的任何想法？

Answer 1

输入[type='text'].givenLettersMobile
{

width: 40px !important;
height: 40px !important;
text-align:center !important;

}

Answer 2

这对我有用：

http://jsfiddle.net/5Lz3zd9y/43/

html:

<div class="ui-bar ui-bar-a ui-widget-content">dog</div>    

<ul class="letters">
      <li>
          <input type="text" value="" size="1" maxlength="1">
      </li>
      <li>
          <input type="text" value="e" size="1" disabled>
      </li>
      <li>
          <input type="text" value="" size="1" maxlength="1">
      </li>
      <li>
          <input type="text" value="" size="1" maxlength="1">
      </li>
      <li>
          <input type="text" value="" size="1" maxlength="1">
      </li>
    </ul>

<input type="text" value="sign in">

CSS：

.letters li {
display: inline-block; 
}