javascript - 在表单下方左对齐新的待办事项列表项-6ren

javascript - 在表单下方左对齐新的待办事项列表项

转载作者：太空宇宙更新时间：2023-11-03 22:29:22

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

这是我当前使用的代码的 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();
  });
});

最佳答案

您只是在寻找:

.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 来完成伪类:

.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>

关于javascript - 在表单下方左对齐新的待办事项列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49354837/

文章推荐： css - Bootstrap 在移动设备上左对齐右文本类

文章推荐： javascript - 如何将我的 CommonJS 模块转换为 UMD？

文章推荐： node.js - 什么时候应该使用错误处理中间件功能

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在表单下方左对齐新的待办事项列表项