如何使我的文本輸入在筆記本電腦屏幕頂部開始

這是一個'待辦事項列表'項目，我想將其包括在我的投資組合中。輸入到文本框中的文本從底部開始，並且不斷將每個附加的「待辦事項」文本放在最後一個文本下方，以便它不會被識別。我希望文本從頁面上的筆記本電腦屏幕頂部開始。請點擊鏈接並輸入任何文字兩次，你會看到我的錯誤。 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>

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

來源

2017-08-07 Nicole Irene

填充UL的300像素導致它來顯示屏幕的中間，將其更改爲250像素 –

我做出了UL襯墊100像素，因此在這裏我想，非常感謝！ –

我把我的評論作爲答案，如果它是有幫助的。請將它標記爲答案:) –

我會設置不同。填充可能會導致屏幕尺寸不同。下面我把筆記本作爲列表的背景。

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>

來源

2017-08-07 15:02:57 Gerard

正如我在評論中提到，UI元素的填充，使其在屏幕中間顯示。

調整填充以解決您的問題。

對於響應式設計，請使用媒體查詢顯示文字正確

來源

2017-08-07 15:13:26

如何使我的文本輸入在筆記本電腦屏幕頂部開始

回答

相關問題