为什么我的“下一个”和“上一个”按钮位于屏幕的右侧而不是底部

时间：2019-01-31 02:42:37

标签： html css html5 css3 button

因此，在我上一个论坛的后续活动中，我能够将我的下一个和上一个按钮居中。我的所有其他页面看起来都很不错，除了我的其中一个页面看上去很乱。我所有的html都链接到我的CSS文件之一，因此它们看起来不错并且可以一起工作。

您能否看到并弄清楚为什么我的 next 和 previous 按钮在页面的右侧而不是“ floating ”我页面的底部应该在哪里？这是我的下一个和上一个按钮的外观，这是我的代码。 这是我从中获得按钮提示的地方 https://www.w3schools.com/howto/howto_css_next_prev.asp

enter image description here 

body {
  background-color: #e6ffe6;
}

* {
  box-sizing: border-box;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #002db3;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
  background-color: #4d4dff;
  transition: 0.5s;
}

ul.topnav li a.active {
  background-color: #00cc99;
  color: black;
  -webkit-animation-name: example;
  Safari 4.0 - 8.0 -webkit-animation-duration: 0.35s;
  Safari 4.0 - 8.0 animation-name: example;
  animation-duration: 0.35s;
}

@keyframes example {
  from {
    background-color: #4d4dff;
  }
  to {
    background-color: #00cc99;
  }
}

ul.topnav li.right {
  float: right;
}

label {
  margin: 0 40px 0 0;
  font-size: 32px;
  line-height: 70px;
  display: none;
  width: 26px;
}

#toggle {
  display: none;
}


/* Navigation Menu Bar End */


/* Home Page Begins */

.summary {
  min-height: 30vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
  background-color: lightblue;
  border: 2px solid lightgreen;
  border-radius: 10px;
  text-align: center;
  font-size: 22px;
}

@media screen and (max-width: 800px) {
  .summary {
    flex-direction: column;
  }
}


/* Home Page Ends */


/* About Me Page CSS begins */

.skillResponsive {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

.container {
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding: 10px;
  color: white;
}

.html {
  width: 60%;
  background-color: #00e64d;
}

.css {
  width: 60%;
  background-color: #4da6ff;
}

.sql {
  width: 10%;
  background-color: #cc66ff;
}

.pc {
  width: 75%;
  background-color: #ff5050;
}

.trouble {
  width: 75%;
  background-color: #ff8533;
  margin-bottom: 45px;
}


/* About Me page Ends */


/* Styling for Portfolio page begins */

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsivePortfolio {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsivePortfolio {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsivePortfolio {
    width: 100%;
  }
}


/* Styling for Portfolio page End */


/* Contact Page Begins */


/* Style inputs, select elements and textareas */

input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}


/* Style the label to display next to the inputs */

.labelContact {
  padding: 12px 12px 12px 0;
  display: inline-block;
}


/* Style the submit button */

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}


/* Style the container */

.containerResponsive {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


/* Floating column for labels: 25% width */

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}


/* Floating column for inputs: 75% width */

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .col-25,
  .col-75,
  input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}


/* Contact Page Ends */


/* Next/Previous buttons */

.nextPreviousButtons {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 20px 28px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
  margin: 10% 10px 0 0;
}

.next {
  background-color: #4CAF50;
  color: white;
  margin: 10% 0 0 10px;
}

.round {
  border-radius: 50%;
}


/* Responsive Begins */

@media screen and (max-width: 800px) {
  /* Kindle/Tablet Size */
  /* Navigation Menu Bar (For all pages) */
  ul.topnav li.right,
  ul.topnav li {
    float: none;
  }
  label {
    display: block;
    cursor: pointer;
    float: right;
  }
  .menu {
    overflow: hidden;
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    display: block;
    border-bottom: 1px solid #00aaff;
    margin: 0;
  }
  #toggle:checked+.menu {
    display: block;
  }
  /* End of Navigation Menu Bar (For all pages) */
  /* Home Page */
  .summary {
    flex-direction: column;
  }
  /* Home Page Ends */
  /* About Me Page Begins */
  .skillResponsive {
    width: 100%;
    text-align: justify;
  }
}


/* About Me Page Ends */


/*End of 800 pixels*/
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="script" href="script.js">
  <script src="script.js"></script>
</head>

<body>

  <!-- The navigation menu -->

  <ul class="topnav">
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle">
    <div class="menu">
      <li><a href="index.html">Home</a>
        <li><a href="about.html">About Me</a></li>
        <li><a href="portfolio.html" class="active">Portfolio</a></li>
        <li><a href="contact.html">Contact Me</a></li>
    </div>
  </ul>

  <!-- The start of everything else -->


  <h1 style="text-align: center;height:40px;margin-top:30px;">
    My Portfolio
  </h1>
  <div class="desc">
    <p style="background-color: lightblue;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia elit nunc, non vulputate turpis tristique at. Suspendisse pellentesque dolor nec libero tincidunt dapibus. Nunc ut dolor tellus. Donec vitae leo sit amet nibh mattis accumsan. Sed eget
      porta nulla. Suspendisse erat justo, ornare in enim at, pretium tempor nisl. Donec posuere, nisl vitae facilisis dictum, est lectus ultricies eros, a euismod neque dolor non odio. Proin mattis nisl erat, ut malesuada nisl suscipit at. Vestibulum
      id sapien eros. Duis aliquet vulputate mi, id lobortis ligula lacinia sed. Sed pharetra nibh quis eros fringilla consequat. Phasellus facilisis leo ac dolor auctor lacinia. Nulla dignissim mi eu quam semper, vitae tristique diam porttitor. Duis
      id tortor sit amet purus vestibulum ultricies. Suspendisse et fermentum felis. Mauris mauris diam, vestibulum ac ornare sit amet, facilisis sed tortor.
    </p>

  </div>

  </p>

  <div class="responsivePortfolio">
    <div class="gallery">
      <a target="_blank" href="img/image21.jpg">
        <img src="img/image21.jpg" width="600" height="400">
      </a>
      <div class="desc">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
  </div>


  <div class="responsivePortfolio">
    <div class="gallery">
      <a target="_blank" href="img/image5.jpg">
        <img src="img/image5.jpg" width="1000" height="200">
      </a>
      <div class="desc">
        The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
        from the 1914 translation by H. Rackham.
      </div>
    </div>
  </div>

  <div class="responsivePortfolio">
    <div class="gallery">
      <a target="_blank" href="img/maximumVariety.jpg">
        <img src="img/maximumVariety.jpg" width="600" height="400">
      </a>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum, ante sed ultrices porta, eros urna mollis tellus, et mattis elit lectus at neque. Curabitur placerat magna et odio bibendum, in tincidunt purus venenatis. Donec nunc diam, cursus sit
        amet commodo ac, suscipit id mi. Nunc imperdiet ex erat, a faucibus est vestibulum in. Nunc consequat erat eget justo egestas, at elementum ante elementum. Nam quis tempor mauris. Phasellus rhoncus libero at condimentum aliquet. Mauris.
      </div>
    </div>
  </div>

  <div class="responsivePortfolio">
    <div class="gallery">
      <a target="_blank" href="img/image4.jpg">
        <img src="img/image4.jpg" width="600" height="400">
      </a>
      <div class="desc">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum, ante sed ultrices porta, eros urna mollis tellus, et mattis elit lectus at neque. Curabitur placerat magna et odio bibendum, in tincidunt purus venenatis. Donec nunc diam, cursus sit
        amet commodo ac, suscipit id mi. Nunc imperdiet ex erat, a faucibus est vestibulum in. Nunc consequat erat eget justo egestas, at elementum ante elementum. Nam quis tempor mauris. Phasellus rhoncus libero at condimentum aliquet. Mauris.
      </div>
    </div>
  </div>

  <div class="nextPreviousButtons">
    <a href="about.html" class="previous round">&#8249;</a>
    <a href="contact.html" class="next round">&#8250;</a>
  </div>

</body>

</html>

1 个答案:

答案 0 :(得分：1)

.war
body {
  background-color: #e6ffe6;
}

* {
  box-sizing: border-box;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #002db3;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
  background-color: #4d4dff;
  transition: 0.5s;
}

ul.topnav li a.active {
  background-color: #00cc99;
  color: black;
  -webkit-animation-name: example;
  Safari 4.0 - 8.0 -webkit-animation-duration: 0.35s;
  Safari 4.0 - 8.0 animation-name: example;
  animation-duration: 0.35s;
}

@keyframes example {
  from {
    background-color: #4d4dff;
  }
  to {
    background-color: #00cc99;
  }
}

ul.topnav li.right {
  float: right;
}

label {
  margin: 0 40px 0 0;
  font-size: 32px;
  line-height: 70px;
  display: none;
  width: 26px;
}

#toggle {
  display: none;
}


/* Navigation Menu Bar End */


/* Home Page Begins */

.summary {
  min-height: 30vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
  background-color: lightblue;
  border: 2px solid lightgreen;
  border-radius: 10px;
  text-align: center;
  font-size: 22px;
}

@media screen and (max-width: 800px) {
  .summary {
    flex-direction: column;
  }
}


/* Home Page Ends */


/* About Me Page CSS begins */

.skillResponsive {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

.container {
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding: 10px;
  color: white;
}

.html {
  width: 60%;
  background-color: #00e64d;
}

.css {
  width: 60%;
  background-color: #4da6ff;
}

.sql {
  width: 10%;
  background-color: #cc66ff;
}

.pc {
  width: 75%;
  background-color: #ff5050;
}

.trouble {
  width: 75%;
  background-color: #ff8533;
  margin-bottom: 45px;
}


/* About Me page Ends */


/* Styling for Portfolio page begins */

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsivePortfolio {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsivePortfolio {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsivePortfolio {
    width: 100%;
  }
}


/* Styling for Portfolio page End */


/* Contact Page Begins */


/* Style inputs, select elements and textareas */

input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}


/* Style the label to display next to the inputs */

.labelContact {
  padding: 12px 12px 12px 0;
  display: inline-block;
}


/* Style the submit button */

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}


/* Style the container */

.containerResponsive {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


/* Floating column for labels: 25% width */

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}


/* Floating column for inputs: 75% width */

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .col-25,
  .col-75,
  input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}


/* Contact Page Ends */


/* Next/Previous buttons */

.nextPreviousButtons {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 20px 28px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
  margin: 10% 10px 0 0;
}

.next {
  background-color: #4CAF50;
  color: white;
  margin: 10% 0 0 10px;
}

.round {
  border-radius: 50%;
}


/* Responsive Begins */

@media screen and (max-width: 800px) {
  /* Kindle/Tablet Size */
  /* Navigation Menu Bar (For all pages) */
  ul.topnav li.right,
  ul.topnav li {
    float: none;
  }
  label {
    display: block;
    cursor: pointer;
    float: right;
  }
  .menu {
    overflow: hidden;
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    display: block;
    border-bottom: 1px solid #00aaff;
    margin: 0;
  }
  #toggle:checked+.menu {
    display: block;
  }
  /* End of Navigation Menu Bar (For all pages) */
  /* Home Page */
  .summary {
    flex-direction: column;
  }
  /* Home Page Ends */
  /* About Me Page Begins */
  .skillResponsive {
    width: 100%;
    text-align: justify;
  }
}


/* About Me Page Ends */


/*End of 800 pixels*/

相关问题
最新问题