我正在使用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>我把它放在你笔的 css 中，它似乎可以解决问题：
.list {
text-align: left;
margin-left: 40px;
}
您可以根据需要调整边距。
您可以使用
.list { 文本对齐：左; }