将文本和翻转开关对齐在同一行

时间:2014-10-08 13:04:21

标签: css jquery-mobile

我正在尝试将FlipSwitch和文本对齐到同一行但到目前为止没有成功。我尝试过使用fieldContain,但没有成功。

<ul data-role="listview">
     <li><h3>Date of Birth:</h3> <span style="float:right;">
            <select name="flip-2" id="flip-2" data-role="flipswitch" data-theme="b">        
              <option value="off">Off</option>
              <option value="on">On</option>
            </select></span></li>
 </ul>

1 个答案:

答案 0 :(得分:1)

只需在h3上使用display:inline-block;

http://jsfiddle.net/q1ukjxnq/1/

CSS

ul li h3 {
    display:inline-block;
}

HTML

<ul data-role="listview">
     <li>
         <h3>Date of Birth:</h3> 
          <select name="flip-2" id="flip-2" data-role="flipswitch" data-theme="b">        
              <option value="off">Off</option>
              <option value="on">On</option>
          </select>
      </li>
 </ul>