Question

我正在尝试在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>

Answer 1

您必须将属性line-height添加到“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;

}

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

1 个答案: