购物清单 Javascript 程序列表项的文本格式不正确

Shopping List Javascript program text of list items not formatting properly

本文关键字：文本 格式 不正确 列表 程序 Javascript      更新时间：2023-09-26

我正在尝试用JavaScript制作一个购物清单程序，该程序有一个输入框和一个添加项目按钮。单击输入字段中的项目按钮文本作为列表项添加到无序列表中。列表项还具有一个子图像图标，该图标包含双击功能并从列表中删除该项。单击列表项会更改背景颜色，使其标记为完成。我面临的问题是列表项的文本在左上角对齐了一点，而图像正确对齐。图像和列表项分别具有浮点数、右浮动和左浮动点数。只是想知道如何做到这一点？CSS，Javascript？完全不知道。请帮忙。

var input = document.getElementById('input');
var addButton = document.getElementById('add');
var list = document.getElementById('list');
addButton.onclick = CreateList;
function CreateList(){
  var li = document.createElement('li');
  li.textContent = input.value;
  var image = document.createElement('img');
  image.setAttribute('src',
 'http://findicons.com/files/icons/1580/devine_icons_part_2/128/trash_recyclebin_empty_closed.png');
  li.appendChild(image);
  list.appendChild(li);
  input.value = ""; 
  image.ondblclick = function(){
    list.removeChild(li);
  };
  li.onclick = function(){
    li.style.background = '#84ac47';
  };
}
.container  
{
   max-width: 600px;
   width: 100%;
   height: auto;
   background-color: #dedede;
   text-align: center;
   font-family: Century Gothic;
}
.head {
  padding: 15px;
}
.body {
  background-color: #dedede;
}
h3 {
  font-weigth: bold;
  font-size: 22px;
  padding: 10px 0;
}
input {
  width: 240px; 
  font-size: 18px;
  padding: 5px;
  outline: none;
  border: 0;
  
}
button {
  font-size: 18px;
  padding: 6px;
  border: 0;
  outline: none;
  background-color: tomato;
  color: #fff;
}
#list {
  width: 335px;
  list-style: none;
}
li {
  float: left;
  padding: 5px;
  margin-left: 92px;
  width: 324px;
  text-align: left;
  border-bottom: 1px solid #666;
  margin-bottom: 10px;
}
img {
  float: right;
  padding: 8px;
  width: 30px;
  height: 30px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="head">
    <h3>Shopping Cart</h3>
    <input type="text" id="input"><!--
    --><button id="add">Add Item</button>
  </div>
  <div class="body">
    <ul id="list">
      
    </ul>
  </div>
</div>
</body>
</html>

必须将属性行高添加到"li"元素样式中：

li {
  float: left;
  padding: 5px;
  margin-left: 92px;
  width: 324px;
  text-align: left;
  border-bottom: 1px solid #666;
  margin-bottom: 10px;
  /* like the image are 30px height + 16px padding, the line-height must be 46px */
  line-height: 46px;

}

相关文章：