【问题标题】:Making a vertical button list in JQM在 JQM 中制作垂直按钮列表
【发布时间】:2013-12-10 20:37:32
【问题描述】:

当每个按钮将您转移到另一个页面时,我正在尝试在我的主要内容页面上制作一个垂直按钮列表。

但每次我尝试将它们放在另一个之上时,它们都非常长,因为默认的 JQM 设置。

这是我的密码:

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true"  class="buttons">
<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button"  data-icon="info"  data-transition="pop" data-inline="true">Sign in</a>
<a href="#popupRegister" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check"  data-transition="pop" >New user? Sign Up!</a>
<a href="#"  data-role="button" data-inline="true" data-icon="star"  data-transition="slideup" >Return a car</a>
<a href="#directions_map" class="show-page-loading-msg" data-role="button" data-inline="true">Map and routing</a>
<a href="#catalog" data-role="button" data-inline="true">Car Catalog</a></p>
</fieldset>

【问题讨论】:

标签: javascript jquery html css jquery-mobile


【解决方案1】:

尝试将&lt;br&gt; 放在每个按钮的开头,将&lt;/br&gt; 放在每个按钮的末尾 更具体地说,这里是经过编辑的版本:

    <fieldset data-role="controlgroup" data-type="vertical" data-mini="true"  class="buttons">
<br><a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button"  data-icon="info"  data-transition="pop" data-inline="true">Sign in</a></br>
<br><a href="#popupRegister" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check"  data-transition="pop" >New user? Sign Up!</a></br>
<br><a href="#"  data-role="button" data-inline="true" data-icon="star"  data-transition="slideup" >Return a car</a></br>
<br><a href="#directions_map" class="show-page-loading-msg" data-role="button" data-inline="true">Map and routing</a></br>
<br><a href="#catalog" data-role="button" data-inline="true">Car Catalog</a></br></p>
</fieldset>

【讨论】:

  • 当您编写长代码时,很容易忘记这样的小事。我一直这样做
  • 请注意,关闭 &lt;/br&gt; 不是 html 规范的一部分:w3.org/html/wg/drafts/html/master/… - 因为这不符合标准,它可能无法在所有浏览器上按需要呈现。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-02-20
  • 1970-01-01
  • 2021-10-06
  • 2020-06-10
  • 1970-01-01
  • 2017-02-05
相关资源
最近更新 更多