我正在尝试添加一些<li>元素，但列表从未出现

时间：2018-06-28 23:11:12

标签： html

我正在尝试制作待办事项列表应用。我刚刚完成了输入部分，但是在创建列表时遇到了麻烦。在我的代码中，该部分无法显示之后，标题之后没有文本。我尝试将代码<div>...</div>更改为<p>...</p>，但仍然无法正常工作。我想知道我的代码有什么问题。 

body,
input,
button {
  font-family: 'Orbitron', sans-serif;
}

header {
  width: 100%;
  height: 300px;
  top: 0;
  left: 0;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  position: fixed;
  background-color: #25b99a;
  outline: none;
  padding: 15px;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
}

header input {
  width: 100%;
  height: 75px;
  top: 200;
  float: left;
  font-size: 20px;
  font-weight: 400;
  text-indent: 30px;
  margin-top: 35px;
  background: rgba(255, 255, 255, 0.3);
  border-top-left-radius: 15px;
  border-top-right-radius: 35.5px;
  border-bottom-right-radius: 35.5px;
  border-bottom-left-radius: 15px;
  outline: none;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: sticky;
}

header button {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 137px;
  right: 15px;
  z-index: 2;
  border-radius: 35.5px;
  background: #fff;
  border: 0px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

header input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input:-moz-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input::-moz-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header button svg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -13px;
}

header button svg .addIcon {
  fill: #25b99a;
}

p {
  font-size: 300%;
  color: rgba(255, 255, 255);
}

.container {
  width: 100%;
  float: left;
  padding: 20px;
}

ul.todo {
  width: 100%;
  float: left;
  height: 50px;
  background: #fff;
  border-radius: 5px;
}
<header>
  <p class="text-center" style="font-size:300%;color:rgba(255,255,255);">To Do List</p>
  <input type="text" placeholder="What is your plan " id="plan">
  <button id="add">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><g><path class="addIcon" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/></g></svg>
         </button>
</header>

<div class="container">
  <ul class="todo">
    <li>hahahaha</li>
    <li>hahahaha</li>
    <li>hahahaha</li>
  </ul>
</div>

2 个答案:

答案 0 :(得分：0)

我相信标题中固定的position：会阻止列表，因此您可以使用不同的位置来获得想要的位置，如下所示。

body,input,button{
   font-family: 'Orbitron', sans-serif;
 }
 header{
   width:100%;
   height:300px;
   top:0;
   left:0;
   box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
   position:relative;
   background-color:#25b99a;
   outline: none;
   padding:15px;
   box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
 }

 header input{
   width: 100%;
   height:75px;
   top: 200;
   float:left;
   font-size: 20px;
   font-weight: 400;
   text-indent: 30px;
   margin-top: 35px;
   background: rgba(255,255,255,0.3);
   border-top-left-radius: 15px;
   border-top-right-radius: 35.5px;
   border-bottom-right-radius:35.5px;
   border-bottom-left-radius:15px;
   outline: none;
   box-shadow: none;
   border:0;
   -webkit-appearance:none;
   -moz-appearance:none;
   position: sticky;
}
<body>
    <header>
    <p class="text-center" style="font-size:300%;color:rgba(255,255,255);">To Do List</p>
     <input type="text" placeholder="What is your plan " id="plan">
     <button id="add">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><g><path class="addIcon" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/></g></svg>
     </button>
   </header>

   <div class="container">
     <ul class="todo">
       <li>hahahaha</li>
       <li>hahahaha</li>
       <li>hahahaha</li>
     </ul>
   </div>

 <script src="js/index.js"></script>
 </body>

答案 1 :(得分：0)

标头包含position: fixed。这意味着报头不再处于常规的 static 布局流程中。 .container现在位于标题的后面。

header {
  box-sizing: border-box;
  height: 300px;
  ...
}

header + .container {
  padding-top: 300px;
}

将解决此问题。

body,
input,
button {
  font-family: 'Orbitron', sans-serif;
}

header {
  width: 100%;
  height: 300px;
  top: 0;
  left: 0;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  position: fixed;
  background-color: #25b99a;
  outline: none;
  padding: 15px;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  box-sizing: border-box;
}

header input {
  width: 100%;
  height: 75px;
  top: 200;
  float: left;
  font-size: 20px;
  font-weight: 400;
  text-indent: 30px;
  margin-top: 35px;
  background: rgba(255, 255, 255, 0.3);
  border-top-left-radius: 15px;
  border-top-right-radius: 35.5px;
  border-bottom-right-radius: 35.5px;
  border-bottom-left-radius: 15px;
  outline: none;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: sticky;
}

header button {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 137px;
  right: 15px;
  z-index: 2;
  border-radius: 35.5px;
  background: #fff;
  border: 0px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

header input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input:-moz-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input::-moz-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header button svg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -13px;
}

header button svg .addIcon {
  fill: #25b99a;
}

p {
  font-size: 300%;
  color: rgba(255, 255, 255);
}

.container {
  width: 100%;
  float: left;
  padding: 20px;
}

ul.todo {
  width: 100%;
  float: left;
  height: 50px;
  background: #fff;
  border-radius: 5px;
}

header+.container {
  padding-top: 300px;
}
<header>
  <p class="text-center" style="font-size:300%;color:rgba(255,255,255);">To Do List</p>
  <input type="text" placeholder="What is your plan " id="plan">
  <button id="add">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><g><path class="addIcon" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/></g></svg>
         </button>
</header>

<div class="container">
  <ul class="todo">
    <li>hahahaha</li>
    <li>hahahaha</li>
    <li>hahahaha</li>
  </ul>
</div>

相关问题
最新问题