待办事项列表项目文本与以下列表项目的文本重叠

Question

我使用jQuery和Bootstrap创建了一个待办事项列表。如果在列表容器中输入的文本长于一行，则第一行中不适合的内容与下一行中的现有列表项文本重叠。

以下是ul和li元素的CSS（完整代码查看CodePen）：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background: white;
  height: 40px;
  /* distance from the top of the first line of text to the top of the second */
  line-height: 40px;
  color: #666;
}

$(function() {

  let degree = 90;

  // Rotates '+' and drops down or recloses input box on click
  $('.fa-plus').on('click', function() {
    if (degree === 135) {
      degree = 45;
    }
    // Sets CSS transform properties. Selector 'this' refers to '+' (with class '.fa-plus') being clicked
    $(this).css({
      '-webkit-transform': 'rotate(' + degree + 'deg)',
      '-moz-transform': 'rotate(' + degree + 'deg)',
      '-ms-transform': 'rotate(' + degree + 'deg)',
      '-o-transform': 'rotate(' + degree + 'deg)',
      'transform': 'rotate(' + degree + 'deg)',
      'transition': '0.2s linear'
    });
    degree += 45;
    // Animates opacity of text box, setting its display style property to none once its opacity reaches 0 if it's visible, or the inverse if already hidden
    $('input[type="text"]').fadeToggle();
  });

  // Checks off specific items upon click and adds them to class 'completed'
  $('ul').on('click', 'li', function() {
    $(this).toggleClass('completed');
  });

  // Click to delete
  $('ul').on('click', 'span', function(e) {
    // fadeOut() hides element by setting it to transparent
    $(this).parent().fadeOut(500, function() {
      // Removes element along with its data and events
      $(this).remove();
    });
    // Prevents event from bubbling up DOM tree, notifying any parent handlers of it
    e.stopPropagation();
  });

  $('input[type="text"]').on('keypress', function(e) {
    // If user hits enter...
    if (e.which === 13) {
      // Grabs new to-do list item from input
      let itemText = $(this).val();
      // If nothing in input box, ceases function execution
      if (itemText === '') return;
      // Clears input box
      $(this).val('');
      // Creates new li from input and adds to beginning of ul
      $('ul').prepend('<li><span><i class="fa fa-trash"></i></span> ' + itemText + '</li>');
    }
  });

});

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background: #642B73;
  background: -webkit-linear-gradient(to right, #C6426E, #642B73);
  background: linear-gradient(to right, #C6426E, #642B73);
}

h1 {
  background: #642B73;
  color: white;
  margin: 0;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: normal;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background: white;
  height: 40px;
  /* distance from the top of the first line of text to the top of the second */
  line-height: 40px;
  color: #666;
}

/* Sets color of even li elements */
li:nth-child(even) {
  background: #f7f7f7;
}

/* Styles Bootstrap trash can icon */
span {
  background: #e74c3c;
  height: 40px;
  width: 0px;
  display: inline-block;
  opacity: 0;
  margin-right: 20px;
  text-align: center;
  color: white;
  transition: 0.2s linear;
}

/* When user hovers over li, sets appearance of span content (Bootstrap trash can icon) */
li:hover span {
  width: 40px; /* Applies to icon background */
  opacity: 1.0; 
}

input {
  font-size: 1em;
  background: #f7f7f7;
  width: 100%;
  height: 40px;
  /* distance from the top of the first line of text to the top of the second */
  line-height: 40px;
  /* Order: top, right, bottom, left */
  padding: 13px 13px 13px 20px;
  /* Includes padding and border in element's total width and height */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #C6426E;
  border: 3px solid rgba(0, 0, 0, 0);
}

/* Sets appearance of input box boundaries when user clicks inside */
input:focus {
  background: white;
  border: 3px solid #642B73;
  outline: none;
}

.completed {
  color: grey;
  text-decoration: line-through;
}

.fa-plus {
  float: right;
  position: relative;
  top: 5px;
}

.container {
  margin: 100px auto;
  background: #f7f7f7;
  width: 360px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To-Do List</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.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">
      <h1>To-Do List<i class="fa fa-plus"></i></h1>
      <input type="text" placeholder="Add new">
      <ul>
        <li><span><i class="fa fa-trash"></i></span>Work on projects for one hour</li>
        <li><span><i class="fa fa-trash"></i></span>Go for a walk</li>
        <li><span><i class="fa fa-trash"></i></span>Meditate</li>
        <li><span><i class="fa fa-trash"></i></span>Stretch</li>
      </ul>
    </div>
  </body>
</html>

Answer 1

您必须修改li个样式。

这将解决它

li {
  background: white;
  min-height: 40px;
  line-height: 40px;
  display: flex;
  color: #666;
}

其他一些问题可能会出现，例如删除按钮，但这会解决重叠问题。

希望这会有所帮助：）

＆＃13;

＆＃13;

$(function() {

  let degree = 90;

  // Rotates '+' and drops down or recloses input box on click
  $('.fa-plus').on('click', function() {
    if (degree === 135) {
      degree = 45;
    }
    // Sets CSS transform properties. Selector 'this' refers to '+' (with class '.fa-plus') being clicked
    $(this).css({
      '-webkit-transform': 'rotate(' + degree + 'deg)',
      '-moz-transform': 'rotate(' + degree + 'deg)',
      '-ms-transform': 'rotate(' + degree + 'deg)',
      '-o-transform': 'rotate(' + degree + 'deg)',
      'transform': 'rotate(' + degree + 'deg)',
      'transition': '0.2s linear'
    });
    degree += 45;
    // Animates opacity of text box, setting its display style property to none once its opacity reaches 0 if it's visible, or the inverse if already hidden
    $('input[type="text"]').fadeToggle();
  });

  // Checks off specific items upon click and adds them to class 'completed'
  $('ul').on('click', 'li', function() {
    $(this).toggleClass('completed');
  });

  // Click to delete
  $('ul').on('click', 'span', function(e) {
    // fadeOut() hides element by setting it to transparent
    $(this).parent().fadeOut(500, function() {
      // Removes element along with its data and events
      $(this).remove();
    });
    // Prevents event from bubbling up DOM tree, notifying any parent handlers of it
    e.stopPropagation();
  });

  $('input[type="text"]').on('keypress', function(e) {
    // If user hits enter...
    if (e.which === 13) {
      // Grabs new to-do list item from input
      let itemText = $(this).val();
      // If nothing in input box, ceases function execution
      if (itemText === '') return;
      // Clears input box
      $(this).val('');
      // Creates new li from input and adds to beginning of ul
      $('ul').prepend('<li><span><i class="fa fa-trash"></i></span> ' + itemText + '</li>');
    }
  });

});

＆＃13;

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background: #642B73;
  background: -webkit-linear-gradient(to right, #C6426E, #642B73);
  background: linear-gradient(to right, #C6426E, #642B73);
}

h1 {
  background: #642B73;
  color: white;
  margin: 0;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: normal;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/*Edited class*/

li {
  background: white;
  min-height: 40px;
  line-height: 40px;
  display: flex;
  color: #666;
}


/* Sets color of even li elements */

li:nth-child(even) {
  background: #f7f7f7;
}


/* When user hovers over li, sets appearance of span content (Bootstrap trash can icon) */

li:hover span {
  width: 40px;
  /* Applies to icon background */
  opacity: 1.0;
}


/* Styles Bootstrap trash can icon */

span {
  background: #e74c3c;
  height: 40px;
  width: 0px;
  display: inline-block;
  opacity: 0;
  margin-right: 20px;
  text-align: center;
  color: white;
  transition: 0.2s linear;
}

input {
  font-size: 1em;
  background: #f7f7f7;
  width: 100%;
  height: 40px;
  /* distance from the top of the first line of text to the top of the second */
  line-height: 40px;
  /* Order: top, right, bottom, left */
  padding: 13px 13px 13px 20px;
  /* Includes padding and border in element's total width and height */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #C6426E;
  border: 3px solid rgba(0, 0, 0, 0);
}


/* Sets appearance of input box boundaries when user clicks inside */

input:focus {
  background: white;
  border: 3px solid #642B73;
  outline: none;
}

.completed {
  color: grey;
  text-decoration: line-through;
}

.fa-plus {
  float: right;
  position: relative;
  top: 5px;
}

.container {
  margin: 100px auto;
  background: #f7f7f7;
  width: 360px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>To-Do List</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="styles.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">
    <h1>To-Do List<i class="fa fa-plus"></i></h1>
    <input type="text" placeholder="Add new">
    <ul>
      <li><span><i class="fa fa-trash"></i></span>Work on projects for one hour</li>
      <li><span><i class="fa fa-trash"></i></span>Go for a walk</li>
      <li><span><i class="fa fa-trash"></i></span>Meditate</li>
      <li><span><i class="fa fa-trash"></i></span>Stretch</li>
    </ul>
  </div>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;