javascript - 我如何在无序列表中居中绝对列表项？

Question

我正在尝试使用链接和无序列表项构建一个座位预订系统。平面图中的行彼此不同。第 1 行有 22 个座位，第 2 行有 24 个座位等。我试图将列表项居中，但我无法弄清楚。

这是我的代码:

$(function generateSeats() {

  var settings = {
    rowCssPrefix: 'row-',
    colCssPrefix: 'col-',
    seatWidth: 22,
    seatHeight: 22,
    seatCss: 'seat',
    selectedSeatCss: 'selectedSeat',
    selectingSeatCss: 'selectingSeat'
  };

  var init = function(reservedSeat) {
    var col = [22, 24, 24, 24, 24, 26, 28, 30, 30, 30, 30, 30, 28, 26, 26, 24, 24, 20, 16, 14];
    var str = [],
      seatNo, className;

    for (i = 0; i < col.length; i++) {
      for (j = 0; j < col[i]; j++) {
        seatNo = (i + j * settings.rows + 1);
        className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
        if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
          className += ' ' + settings.selectedSeatCss;
        }
        str.push('<li class="' + className + '"' +
          'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
          '<a title="' + seatNo + '">' + seatNo + '</a>' +
          '</li>');
      }
    }
    $('#place').html(str.join(''));
  };

  var bookedSeats = [];
  init(bookedSeats);

  $('.' + settings.seatCss).click(function() {
    if ($(this).hasClass(settings.selectedSeatCss)) {
      alert('Deze stoel is al bezet');
    } else {
      $(this).toggleClass(settings.selectingSeatCss);
    }
  });

  $('#btnShow').click(function() {
    var str = [];
    $.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
      str.push($(this).attr('title'));
    });
    alert(str.join(','));
  })

  $('#btnShowNew').click(function() {
    var str = [],
      item;
    $.each($('#place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
      item = $(this).attr('title');
      str.push(item);
    });
    alert(str.join(','));
  })
});

    #holder {
      height: 447px;
      width: 667px;
      background-color: #F5F5F5;
      margin: auto;
      border: 1px solid #A4A4A4;
      position: relative;
    }
    #place {
      display: table-row;
    }
    #place li {
      display: table-cell;
      vertical-align: middle;
      list-style-type: none;
      position: absolute;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
  <ul id="place">

  </ul>
</div>

<div class="button">
  <input type="button" id="btnShowNew" value="Keuze" />
</div>

http://jsfiddle.net/0bb4j5q7/

Answer 1

我建议您为每一行使用一个 ul 并将它们居中。现在的情况是，标记在单个 ul 中没有行的概念，因此您无法将它们居中。