JQuery Mobile CSS Text Input

Question

Here is a 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%;   
}

In regards to the JSFiddle using JQuery Mobile, I'm trying to figure out how to get all the text input boxes aligned left to right instead of stacked top to bottom while also trying to reduce the width of the text input boxes (without affecting the width of other input boxes like username, password, etc...). Something more like how these text input boxes behave from the desktop version of the website:

Any thoughts on how to accomplish this?

Answer 1

input[type='text'].givenLettersMobile
{

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

}

Answer 2

Here is what worked for me:

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; 
}