Question

我正在使用jQuery创建一个待办事项列表，并使用text-align: center在我的CSS文件中使用body来集中页面上的所有内容。但是，如何在表单下方左对齐新添加的列表项？

这是我正在使用的代码的JavaScript部分（我猜这是我需要更改的内容），但您也可以查看我的CodePen来查看CSS和HTML。

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // inserts specified element as last child of target element
    $('.list').append('<div class="item">' + toAdd + '</div>');
    // clears input box after clicking 'add'
    $('input[name=checkListItem]').val('');
  });

  $('input[name=checkListItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      // e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
      return false;
    }
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

Answer 1

你只是在寻找：

.item {
  text-align: left;
}

这可以在以下内容中看到：

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // inserts specified element as last child of target element
    $('.list').append('<div class="item">' + toAdd + '</div>');
    // clears input box after clicking 'add'
    $('input[name=checkListItem]').val('');
  });

  $('input[name=checkListItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      // e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
      return false;
    }
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

body {
  text-align: center;
  background: #dfdfdf;
  font-family: Helvetica;
  color: #666;
  background: linear-gradient(to left, #DA4453, #89216B);
}

.container {
  padding: 30px;
  padding-top: 10px;
  width: 300px;
  /* 0 is for top-bottom and auto (set to equal values for each by browser) for left-right */
  margin: 0 auto;
  margin-top: 40px;
  background: white;
  border-radius: 5px;
}

form {
  /* needed for the same property/value to work to display the button next to form */
  display: inline-block;
}

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 15em;
  color: #666;
}

.button {
  /* makes button display next to form */
  display: inline-block;
  box-shadow: inset 0px 1px 0 0 #fff;
  /* starts at top, transitions from left to right */
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  background-color: #c00;
  font-size: 0.7em;
  font-family: Arial;
  font-weight: bold;
  border-radius: 0.33em;
  /* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
  padding: 0.5em 0.9em;
  text-shadow: 0 1px #fff;
  text-align: center;
}

.button:hover {
  cursor: pointer;
  opacity: .8;
}

.item {
  text-align: left;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="stylesheet.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <h2>To Do</h2>
    <form name="checkListForm">
      <input type="text" name="checkListItem" />
    </form>
    <div class="button">Add</div>
    <br>
    <div class="list"></div>
  </div>
</body>

</html>

请注意，您可能还想在第一个元素中添加一些 margin-top ，这可以通过 :first-of-type 伪来完成-class：

.item:first-of-type {
  margin-top: 20px;
}

以下添加此内容：

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // inserts specified element as last child of target element
    $('.list').append('<div class="item">' + toAdd + '</div>');
    // clears input box after clicking 'add'
    $('input[name=checkListItem]').val('');
  });

  $('input[name=checkListItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      // e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
      return false;
    }
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

body {
  text-align: center;
  background: #dfdfdf;
  font-family: Helvetica;
  color: #666;
  background: linear-gradient(to left, #DA4453, #89216B);
}

.container {
  padding: 30px;
  padding-top: 10px;
  width: 300px;
  /* 0 is for top-bottom and auto (set to equal values for each by browser) for left-right */
  margin: 0 auto;
  margin-top: 40px;
  background: white;
  border-radius: 5px;
}

form {
  /* needed for the same property/value to work to display the button next to form */
  display: inline-block;
}

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 15em;
  color: #666;
}

.button {
  /* makes button display next to form */
  display: inline-block;
  box-shadow: inset 0px 1px 0 0 #fff;
  /* starts at top, transitions from left to right */
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  background-color: #c00;
  font-size: 0.7em;
  font-family: Arial;
  font-weight: bold;
  border-radius: 0.33em;
  /* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
  padding: 0.5em 0.9em;
  text-shadow: 0 1px #fff;
  text-align: center;
}

.button:hover {
  cursor: pointer;
  opacity: .8;
}

.item {
  text-align: left;
}

.item:first-of-type {
  margin-top: 20px;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="stylesheet.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <h2>To Do</h2>
    <form name="checkListForm">
      <input type="text" name="checkListItem" />
    </form>
    <div class="button">Add</div>
    <br>
    <div class="list"></div>
  </div>
</body>

</html>

Answer 2

我把它放在笔的css中，似乎可以解决问题：

.list { text-align: left; margin-left: 40px; }

您可以根据需要调整保证金。

Answer 3

你可以使用

.list { text-align：left; }

左对齐下面的新待办事项列表

3 个答案: