Question

我正在使用jQuery Mobile进行列表视图，我正在尝试将listview描述与（滑块）按钮对齐。

我有一个很长的描述文字。问题是如果屏幕太小（或文本很长），我需要文本开始一个新行，现在发生的是文本与按钮混合。

以下是我的代码

  <div data-role="header" data-position="fixed" data-theme="b">
  <h1>header</h1>
   <a href="#" class="ui-btn-right" data-icon="back"  rel="external" data-   iconpos="notext">Refresh</a> </div>
 <div class="content-primary" >
 <ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false" class="table">
<li ><a href="#">
  <div  >
    <h2 style="text-align:justify; font-size:16px; white-space:normal;"> How Do I Know if Healthcare is a Good Career Choice for Me? </h2>
    <p class="ui-li-aside">
      <select id="flip-select" name="flip-select" data-role="flipswitch" data-mini="true">
        <option>No </option>
        <option>Yes</option>
      </select>
    </p>
  </div>
  </a></li>
<li><a href="#">
  <div>
    <h2 style="text-align:justify; font-size:16px; white-space:normal;">How and Where Do I Start to Pursue a Healthcare Career? </h2>
    <p class="ui-li-aside">
      <<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
     <option>Custom menu example</option>
     <option value="standard">Standard: 7 day</option>
     <option value="rush">Rush: 3 days</option>
     <option value="express">Express: next day</option>
     <option value="overnight">Overnight</option>
    </select>
    </p>
  </div>
  </a></li>
  </ul>
  </div>

Answer 1

工作示例：http://jsfiddle.net/jJhMp/

CSS：

.ui-listview > li h1, .ui-listview > li h2, .ui-listview > li h3, .ui-listview > li h4, .ui-listview > li h5, .ui-listview > li h6 {
    margin: 0.45em 7em 0.45em 0 !important;
    white-space: normal !important;
}

JQuery Mobile ListView使用滑块按钮在多行显示文本

1 个答案:

CSS：