待办事项列表项目文本与下列列表项目的文本重叠 [英] To-do list item text overlaps with text of following list item

问题描述

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

这里是我的CSS为 ul 和 li 元素（view CodePen 的完整代码）：

  ul {
 list-style：none; 
保证金：0; 
 padding：0; 
} 
 
 li {
 background：white; 
 height：40px; 
 / *第一行文本顶部到第二行顶部的距离* / 
 line-height：40px; 
颜色：＃666; 
} 
  

 <$ $（'。fa-plus'）。on（'click'，function（）{（）;}（函数（）{let degree = 90; //旋转'+'并下拉或重新放置输入框。 if（degree === 135）{degree = 45;} //设置CSS转换属性选择器'this'是指'+'（带类'.fa-plus'）被点击$（this）.css（{ '-webkit-transform'：'rotate（'+ degree +'deg）'，'-moz-transform'：'rotate（'+ degree +'deg）'，'-ms-transform'：'rotate（'+ （'+度+'度）'，'变换'：'旋转（'+度+'度）'，'过渡'：'0.2s线性'}）; degree + = 45; //激活文本框的不透明度，设置其显示风格当它的不透明度达到0时，如果它是可见的，则返回none;如果已经隐藏，则反转为$（'input [type =text]'）。 }）; //点击特定项目并将它们添加到类'completed'$（'ul'）。on（'click'，'li'，function（）{$（this）.toggleClass（'completed'）;} ）; //点击删除$（'ul'）。on（'click'，'span'，function（e）{// fadeOut（）通过将元素设置为透明$（this）.parent（）来隐藏元素fadeOut 500，function（）{//删除元素及其数据和事件$（this）.remove（）;}）; //防止事件冒泡DOM树，通知它的任何父处理程序e.stopPropagation（）; }）; $（'input [type =text]'）。on（'keypress'，function（e）{//如果用户输入... if（e.which === 13）{//抓住新的如果（itemText ===''）return; //清除输入框$（this），则返回一个输入框列表项itemText = $（this）.val（）; //如果输入框中没有任何内容，则停止函数执行if（itemText ===''）return; val（''）; //从输入创建新的li，并添加到ul $（'ul'）的开始处prepend（'< li> span>< i class =fa fa-trash> < / span>'+ itemText +'< / li>））;}}）;}）;  
  body {margin：0; font-family：Roboto，sans-serif;背景：＃642B73;背景：-webkit-linear-gradient（向右，＃C6426E，＃642B73）;背景：线性渐变（向右，＃C6426E，＃642B73）;} h1 {background：＃642B73;白颜色;保证金：0; padding：10px 20px;文字转换：大写; font-size：24px; font-weight：normal;} ul {list-style：none;保证金：0; padding：0;} li {background：white; height：40px; / *第一行文本顶部到第二行顶部的距离* / line-height：40px;颜色：＃666;} / *设置即使li元素的颜色* / li：nth-​​child（偶数）{background：＃f7f7f7;} / *样式Bootstrap垃圾桶图标* / span {background：＃e74c3c; height：40px; width：0px;显示：inline-block;不透明度：0; margin-right：20px; text-align：center;白颜色; transition：0.2s linear;} / *当用户悬停在li上时，设置span内容的外观（Bootstrap垃圾桶图标）* / li：hover span {width：40px; / *适用于图标背景* /不透明度：1.0; } input {font-size：1em;背景：＃f7f7f7;宽度：100％; height：40px; / *第一行文本顶部到第二行顶部的距离* / line-height：40px; / *顺序：顶部，右侧，底部，左侧* / padding：13px 13px 13px 20px; / *在元素的总宽和高中包含填充和边框* / box-sizing：border-box; -webkit-box-sizing：border-box; -moz-box-sizing：border-box;颜色：＃C6426E; border：3px solid rgba（0，0，0，0）;} / *设置用户点击时输入框边界的外观* / input：focus {background：white; border：3px solid＃642B73; outline：none;}。completed {color：gray; text-decoration：line-through;}。fa-plus {float：right;位置：相对; top：5px;}。container {margin：100px auto;背景：＃f7f7f7;宽度：360px; box-shadow：0 0 50px rgba（0,0,0,0.1）;}  
 
 < HTML> < HEAD> < meta charset =UTF-8> < meta name =viewportcontent =width = device-width，initial-scale = 1.0> < meta http-equiv =X-UA-Compatiblecontent =ie = edge> < title>待办事项列表< / title> < link href =https://fonts.googleapis.com/css?family=Roboto:400,500,700 =stylesheet> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css> < link rel =stylesheethref =styles.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script> < script src =script.js>< / script> < /头> <身体GT; < div class =container> < h1>待办事项列表< i class =fa fa-plus>< / i>< / h1> < input type =textplaceholder =Add new> < UL> < i>< span>< i class =fa fa-trash>< / i>< / span>在一小时内完成项目工作< / li> < i>< span>< i class =fa fa-trash>< / i>< / span>去散步< / li> < i>< span>< i class =fa fa-trash>< / i>< / span>打坐< / li> < i>< span>< i class =fa fa-trash>< / i>< / span> Stretch< / li> < / UL> < / DIV> < / body>< / html>  
 

解决方案

这样可以解决它

p>

  li {
 background：white; 
 min-height：40px; 
 line-height：40px; 
 display：flex; 
颜色：＃666; 
} 
  

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

希望这有助于：）

 $（'。fa-plus'）。on（'click'，function（）; $（function（）{let degree = 90; //旋转'+'并点击输入框）{if（degree === 135）{degree = 45;} //设置CSS转换属性选择器'this'被点击$（this）.css（'class'.fa-plus' （{'-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; //动画显示文本框的不透明度，如果它的不透明度达到0，隐藏$（'input [type =text]'）。fadeToggle（）; }）; //点击特定项目并将它们添加到类'completed'$（'ul'）。on（'click'，'li'，function（）{$（this）.toggleClass（'completed'）;} ）; //点击删除$（'ul'）。on（'click'，'span'，function（e）{// fadeOut（）通过将元素设置为透明$（this）.parent（）来隐藏元素fadeOut 500，function（）{//删除元素及其数据和事件$（this）.remove（）;}）; //防止事件冒泡DOM树，通知它的任何父处理程序e.stopPropagation（）; }）; $（'input [type =text]'）。on（'keypress'，function（e）{//如果用户输入... if（e.which === 13）{//抓住新的如果（itemText ===''）return; //清除输入框$（this），则返回一个输入框列表项itemText = $（this）.val（）; //如果输入框中没有任何内容，则停止函数执行if（itemText ===''）return; val（''）; //从输入创建新的li，并添加到ul $（'ul'）的开始处prepend（'< li> span>< i class =fa fa-trash> < / span>'+ itemText +'< / li>））;}}）;}）;  
  body {margin：0; font-family：Roboto，sans-serif;背景：＃642B73;背景：-webkit-linear-gradient（向右，＃C6426E，＃642B73）;背景：线性渐变（向右，＃C6426E，＃642B73）;} h1 {background：＃642B73;白颜色;保证金：0; padding：10px 20px;文字转换：大写; font-size：24px; font-weight：normal;} ul {list-style：none;保证金：0; padding：0;} / *编辑类* / li {background：white;最小高度：40px; line-height：40px;显示：flex;颜色：＃666;} / *设置即使li元素的颜色* / li：nth-​​child（偶数）{background：＃f7f7f7;} / *当用户悬停在li上时，设置span内容的外观（Bootstrap垃圾桶图标） * / li：hover span {width：40px; / *适用于图标背景* /不透明度：1.0;} / *样式Bootstrap垃圾桶图标* / span {background：＃e74c3c; height：40px; width：0px;显示：inline-block;不透明度：0; margin-right：20px; text-align：center;白颜色; transition：0.2s linear;} input {font-size：1em;背景：＃f7f7f7;宽度：100％; height：40px; / *第一行文本顶部到第二行顶部的距离* / line-height：40px; / *顺序：顶部，右侧，底部，左侧* / padding：13px 13px 13px 20px; / *在元素的总宽和高中包含填充和边框* / box-sizing：border-box; -webkit-box-sizing：border-box; -moz-box-sizing：border-box;颜色：＃C6426E; border：3px solid rgba（0，0，0，0）;} / *设置用户点击时输入框边界的外观* / input：focus {background：white; border：3px solid＃642B73; outline：none;}。completed {color：gray; text-decoration：line-through;}。fa-plus {float：right;位置：相对; top：5px;}。container {margin：100px auto;背景：＃f7f7f7;宽度：360px; box-shadow：0 0 50px rgba（0,0,0,0.1）;}  
 
 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< html> < HEAD> < meta charset =UTF-8> < meta name =viewportcontent =width = device-width，initial-scale = 1.0> < meta http-equiv =X-UA-Compatiblecontent =ie = edge> < title>待办事项列表< / title> < link href =https://fonts.googleapis.com/css?family=Roboto:400,500,700 =stylesheet> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css> < link rel =stylesheethref =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>待办事项列表< i class =fa fa-plus>< / i>< / h1> < input type =textplaceholder =Add new> < UL> < i>< span>< i class =fa fa-trash>< / i>< / span>在一小时内完成项目工作< / li> < i>< span>< i class =fa fa-trash>< / i>< / span>去散步< / li> < i>< span>< i class =fa fa-trash>< / i>< / span>打坐< / li> < i>< span>< i class =fa fa-trash>< / i>< / span> Stretch< / li> < / UL> < / div>< / body>< / html>  
 

I created a to-do list with jQuery and Bootstrap. If you enter text longer than a single line in the list container, whatever doesn't fit in the first line overlaps with existing list item text in the following one.

Here's my CSS for ul and li elements (view CodePen for full code):

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>

解决方案

You would have to modify your li styles.

This will fix it

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

Some other issues might arrrise, like the delete button, but this solves the overlap.

Hope this helps :)

$(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;
}


/*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);
}

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

这篇关于待办事项列表项目文本与下列列表项目的文本重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！