CSS - выравнивание сортируемых списков по центру - PullRequest
Новая
       8

CSS - выравнивание сортируемых списков по центру

1 голос
/ 05 февраля 2020

Я пытаюсь использовать пример из https://jqueryui.com/sortable/#connect -списков , но я хочу сделать два списка в середине страницы. Я пробовал много разных методов, но, похоже, ничего не работает должным образом. 

body {
  margin: 0;
  /* font-family: Verdana, sans-serif; */
}

#version-editor {
  margin: auto;
  width: 50%;
  height: 90%;
}

#sortable1,
#sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
<body>
  <div id="version-editor">
    <ul id="sortable1" class="connectedSortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-highlight">Item 1</li>
      <li class="ui-state-highlight">Item 2</li>
      <li class="ui-state-highlight">Item 3</li>
      <li class="ui-state-highlight">Item 4</li>
      <li class="ui-state-highlight">Item 5</li>
    </ul>

  </div>
</body>

1 Ответ

1 голос
/ 05 февраля 2020

добавлено text-align: center; к #version-editor

body {
  margin: 0;
  /* font-family: Verdana, sans-serif; */
}

#version-editor {
  border: 1px solid red;
  margin: 0 auto;
  width: 50%;
  height: 90%;
  text-align: center; /* added */
}

#sortable1,
#sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0 auto; /* added */
  padding: 5px 0 0 0;
  display: inline-block; /* remove float and added this line */
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
<body>
  <div id="version-editor">
    <ul id="sortable1" class="connectedSortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-highlight">Item 1</li>
      <li class="ui-state-highlight">Item 2</li>
      <li class="ui-state-highlight">Item 3</li>
      <li class="ui-state-highlight">Item 4</li>
      <li class="ui-state-highlight">Item 5</li>
    </ul>

  </div>
</body>
...