Question

我有一个包含几行的jQueryUI菜单，每个菜单都有完全相同类型的元素。即：

  <ul id="menu1">
        <li id="row1"><span id="row1-1">Row1</span><input id="row1-2"><span id="row1-3">blah</span></li>
        <li id="row2"><span id="row2-1">Row Two</span><input id="row2-2"><span id="row2-3">blah2</span></li>
  </ul>
  <script>
  $('#menu1').menu()
  </script>

我想垂直对齐每个相同类型的元素，以便文本“Row1”垂直对齐“第二行”，然后<input id="row1-2">垂直对齐<input id="row2-2">等。

我该怎么做？

这是jsbin：http://jsbin.com/IHiGEYAd/1/edit

Answer 1

出于可访问性原因，正确的方法是使用标签标签并给它们宽度：

http://jsbin.com/IHiGEYAd/3/

<style>
label {width: 100px; display: inline-block;}
</style>

<ul id="menu1">
    <li id="row1">
        <label for="row1-2" id="row1-1">Row1</label>
        <input id="row1-2" />
        <span id="row1-3">blah</span>
    </li>

    <li id="row2">
        <label for="row2-2" id="row2-1">Row Two</label>
        <input id="row2-2" />
        <span id="row2-3">blah2</span>
    </li>
</ul>

jQueryUI：垂直对齐Menu行的html元素

1 个答案: