Question

这是一个'待办事项列表'项目，我希望将其纳入我的投资组合中。输入框中的文本从底部开始，并将每个额外的“待办事项”文本放在最后一个文本下面，因此它不易读。我希望文本从页面上的笔记本电脑屏幕顶部开始。请单击链接并输入任意文本两次，您将看到我的错误。 https://nicoleirene.github.io/js-exercise-2/ 我的代码如下。

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/style.css">
        <title>JS Exercise 2</title>
    </head>
    <body>
      <h1>Lets Do This</h1>
      <form>

        <label for="user-input" >Type your to do:</label>
        <div class="wrapper">
            <input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">

            <button type="submit" id="user-submit">Add To Do!</button> 
        </div> 
      </form>

      <ul id="to-do-list" class="to-do-list">

      </ul>


      <!-- Make sure script is loaded at the bottom-->
        <script src="js/app.js"></script>
    </body>
</html>

JS

var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');
function addToDo(event){
    event.preventDefault();

    var userInput = document.querySelector('#user-input');


    if(userInput.value === ''){
        return false;
    }

    toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' +  toDoList.innerHTML;

    userInput.value = '';
}

function removeToDo(event){
    if(event.target.classList.contains('close-to-do')) {
        var li = event.target.parentElement;
        toDoList.removeChild(li);

    }
}

toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Raleway', sans-serif;
  background-color: #FFF;
  background-image: url("../images/pixel-open-front.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  color: #000;
}
h1{
  text-align: center;
  padding:;
  background-color: blue;
  color:#FFF;
}
label{
  display: block;
  margin:right;
  text-align: center;
  background-color: red;
  color:white;
}
input{
  /*display:block;
  margin:auto;*/
}
.wrapper{
  text-align: center;
}
button{
  color:white;
  background-color:red;
  border:none; 
  padding: 5px;
  margin-top: 5px;

}
ul{
  text-align: center;
  padding: 300px;
  list-style: none;
  color:red;
}
.close-to-do{
  display: inline-block;
  margin-right: 10px;
}

Answer 1

我会以不同的方式进行设置。填充可能会导致不同屏幕尺寸的问题。下面我把笔记本电脑作为列表的背景。

var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');

function addToDo(event) {
  event.preventDefault();

  var userInput = document.querySelector('#user-input');


  if (userInput.value === '') {
    return false;
  }

  toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML;

  userInput.value = '';
}

function removeToDo(event) {
  if (event.target.classList.contains('close-to-do')) {
    var li = event.target.parentElement;
    toDoList.removeChild(li);

  }
}

toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);

@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Raleway', sans-serif;
  background-color: #FFF;
  color: #000;
}

h1 {
  text-align: center;
  padding: ;
  background-color: blue;
  color: #FFF;
}

label {
  display: block;
  margin: right;
  text-align: center;
  background-color: red;
  color: white;
}

input {
  /*display:block;
  margin:auto;*/
}

.wrapper {
  text-align: center;
}

button {
  color: white;
  background-color: red;
  border: none;
  padding: 5px;
  margin-top: 5px;
}

ul {
  text-align: center;
  padding-top: 100px; /* same as top background */
  list-style: none;
  color: red;
}

ul:before {
  content: url(https://nicoleirene.github.io/js-exercise-2/images/pixel-open-front.png);
  position: absolute;
  top: 100px; /* same as padding top */
  left: 80px; 
}

.close-to-do {
  display: inline-block;
  margin-right: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Lets Do This</h1>
<form>
  <label for="user-input">Type your to do:</label>
  <div class="wrapper">
    <input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">

    <button type="submit" id="user-submit">Add To Do!</button>
  </div>
</form>
<ul id="to-do-list" class="to-do-list"></ul>

Answer 2

正如我的评论所述，在UI元素上填充会导致它显示在屏幕中间。

调整填充以解决问题。

对于响应式设计，请使用媒体查询正确显示文本

如何让我的文本输入从笔记本电脑图像屏幕的顶部开始

2 个答案: