Question

我创建了一个快速导航。标题带有两个按钮（上一个和下一个），但我不知道哪种方法是正确的。这是给我考试的。

我的老师告诉我，对于所有互动，我都需要使用按钮标签。如果我不使用它们，他给我“ F”。列表相同。如果我有多个元素，他会强迫我使用ul。

HTML

<h1 class="header">
<div class="button"><button class="btn-first">Previous</button></div>
<div class="title-first">Engine</div>
<div class="button"><button class="btn-first btn-right">Next</button></div>
</h1>


<ul class="header">
<li class="button"><button class="btn-second">Previous</button></li>
<li><h1 class="title-second">Engine</h1></li>
<li class="button"><button class="btn-second btn-right">Next</button></li>
</ul>

CSS

/* --- GLOBAL ---- */
body{
  margin: 0 auto;
}
.header{
  text-align: center;
}
.button{
  display: inline-block;
  float: left;
  width: 20%;
}
.title-first{
  display: inline-block;
  float: left;
  background-color: #d1d1d1;
  width: 60%;
  padding: 20px 0px;
}

/* --- FIRST NAV ---- */
.btn-first{
    background-color: blue;
    background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-512.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px;
    border: none;
    font: inherit;
    text-indent: -9999px;
    width: 100%;
    padding: 20px 0px;
}


/* --- SECOND NAV ---- */
ul{
  padding-left: 0;
  list-style-type: none;
}
.title-second{
  display: inline-block;
  float: left;
  background-color: #d1d1d1;
  width: 60%;
  padding: 20px 0px;
  margin: 0;
  font-size: 20px;
}
.btn-second{
    background-color: blue;
    background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-512.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px;
    border: none;
    text-indent: -9999px;
    width: 100%;
    padding: 20px 0px;
    font-size: 20px;
}


.btn-right{
    background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-512.png");
}

http://jsfiddle.net/73mbw8zr/50/

以下哪种方法是正确的（带按钮标题）

0 个答案: