Question

我一直在为我的网站创建一个简单的侧边栏。我想在我的主表旁边放一个40px margin，因此它看起来不像是侧边栏的一部分。

我还试图在主要区域周围放置一个<div>并按照这样设置：

margin: 40px;

我也有导航栏。（如果你想在导航栏中缩小字体大小，我很好。）我该怎么做？

所有代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: Open Sans;
      margin: 40px;
    }
    .dateOfPost {
      font-weight: bold;
      text-decoration: underline;
    }
    form {
      border: 1px solid #000;
      width: 270px;
      height: auto;
      float: left;
    }
    #cssmenu ul {
      background: #f96e5b;
      width: auto;
      list-style: none;
      float: right;
      margin: 0;
      padding: 0;
      line-height: 1;
      display: block;
      zoom: 1;
    }
    #cssmenu ul:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    #cssmenu ul li {
      display: inline-block;
      padding: 0;
      margin: 0;
    }
    #cssmenu.align-right ul li {
      float: right;
    }
    #cssmenu.align-center ul {
      text-align: center;
    }
    #cssmenu ul li a {
      font-size: auto;
      color: #ffffff;
      text-decoration: none;
      display: block;
      padding: 15px 25px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 14px;
      position: relative;
      -webkit-transition: color .25s;
      -moz-transition: color .25s;
      -ms-transition: color .25s;
      -o-transition: color .25s;
      transition: color .25s;
    }
    #cssmenu ul li a:hover {
      color: #333333;
    }
    #cssmenu ul li a:hover:before {
      width: 100%;
    }
    #cssmenu ul li a:after {
      content: "";
      display: block;
      position: absolute;
      right: -3px;
      top: 19px;
      height: 6px;
      width: 6px;
      background: #ffffff;
      opacity: .5;
    }
    #cssmenu ul li.last > a:after,
    #cssmenu ul li:last-child > a:after {
      display: none;
    }
    #cssmenu ul li.active a {
      color: #333333;
    }
    #cssmenu ul li.active a:before {
      width: 100%;
    }
    #cssmenu.align-right li.last > a:after,
    #cssmenu.align-right li:last-child > a:after {
      display: block;
    }
    #cssmenu.align-right li:first-child a:after {
      display: none;
    }
    @media screen and (max-width: 768px) {
      #cssmenu ul li {
        float: none;
        display: block;
      }
      #cssmenu ul li a {
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid #fb998c;
      }
      #cssmenu ul li.last > a,
      #cssmenu ul li:last-child > a {
        border: 0;
      }
      #cssmenu ul li a:after {
        display: none;
      }
      #cssmenu ul li a:before {
        display: none;
      }
    }
  </style>
  <script>
  </script>
</head>

<body>
  <noscript>
    <p>Please enable Javascript before viewing this page or else some elements may not appear and/or function properly.</p>
  </noscript>
  <div id="sidebar">
    <form id="signUp">
      <p>
        <b>Hey! </b>Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D
        <br />
        <br />Nickname:
        <input type="text" id="nickname" placeholder="Nickname" required>
        <br/>Email Address:
        <input type="text" id="email" placeholder="Email Address" maxlength="254" required>
        <br />Password:
        <input type="password" id="password" placeholder="Password" required>
        <br />
        <input type="button" value="Submit" onclick="confirmAccount">
      </p>
    </form>
  </div>
  <div class="rightColumn">
    <h1>Ryan Zhang's Blog</h1>
    <div id="cssmenu">
      <ul>
        <li class="active"><a href="home.html"><span>Home</span></a>
        </li>
        <li><a href="aboutMe.html"><span>About Me</span></a>
        </li>
        <li><a href="tipsNTricks.html"><span>Tips 'n' Tricks</span></a>
        </li>
        <li><a href="inspiration.html"><span>Inspirational Quotes and       Words</span></a>
        </li>
        <li><a href="timeline.html"><span>Timeline of Me</span></a>
        </li>
        <li><a href="contact.html"><span>Contact</span></a>
        </li>
      </ul>
    </div>
    <hr />
    <p>
      Lorem Ipsum
      <br />Upload Date:
      <br />
      <date>25/10/15</date>
    </p>
    <hr />
  </div>
</body>

</html>

＆＃13;

Answer 1

您可以为右列添加宽度并将其向右浮动。如果你可以添加更多的保证金，但导航包裹到第二行。

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: Open Sans;
      margin: 40px;
    }
    .dateOfPost {
      font-weight: bold;
      text-decoration: underline;
    }
    h1 {
      margin-top: 0px;
    }
    .rightColumn {
      width: 77%;
      float: right;
    }
    form {
      border: 1px solid #000;
      width: 270px;
      height: auto;
      float: left;
    }
    #cssmenu ul {
      background: #f96e5b;
      width: auto;
      list-style: none;
      margin: 0;
      padding: 0;
      line-height: 1;
      display: block;
      zoom: 1;
    }
    #cssmenu ul:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    #cssmenu ul li {
      display: inline-block;
      padding: 0;
      margin: 0;
    }
    #cssmenu.align-right ul li {
      float: right;
    }
    #cssmenu.align-center ul {
      text-align: center;
    }
    #cssmenu ul li a {
      font-size: auto;
      color: #ffffff;
      text-decoration: none;
      display: block;
      padding: 15px 25px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 14px;
      position: relative;
      -webkit-transition: color .25s;
      -moz-transition: color .25s;
      -ms-transition: color .25s;
      -o-transition: color .25s;
      transition: color .25s;
    }
    #cssmenu ul li a:hover {
      color: #333333;
    }
    #cssmenu ul li a:hover:before {
      width: 100%;
    }
    #cssmenu ul li a:after {
      content: "";
      display: block;
      position: absolute;
      right: -3px;
      top: 19px;
      height: 6px;
      width: 6px;
      background: #ffffff;
      opacity: .5;
    }
    #cssmenu ul li.last > a:after,
    #cssmenu ul li:last-child > a:after {
      display: none;
    }
    #cssmenu ul li.active a {
      color: #333333;
    }
    #cssmenu ul li.active a:before {
      width: 100%;
    }
    #cssmenu.align-right li.last > a:after,
    #cssmenu.align-right li:last-child > a:after {
      display: block;
    }
    #cssmenu.align-right li:first-child a:after {
      display: none;
    }
    @media screen and (max-width: 768px) {
      #cssmenu ul li {
        float: none;
        display: block;
      }
      #cssmenu ul li a {
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid #fb998c;
      }
      #cssmenu ul li.last > a,
      #cssmenu ul li:last-child > a {
        border: 0;
      }
      #cssmenu ul li a:after {
        display: none;
      }
      #cssmenu ul li a:before {
        display: none;
      }
    }
  </style>
  <script>
  </script>
</head>

<body>
  <noscript>
    <p>Please enable Javascript before viewing this page or else some elements may not appear and/or function properly.</p>
  </noscript>
  <div id="sidebar">
    <form id="signUp">
      <p>
        <b>Hey! </b>Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D
        <br />
        <br />Nickname:
        <input type="text" id="nickname" placeholder="Nickname" required>
        <br/>Email Address:
        <input type="text" id="email" placeholder="Email Address" maxlength="254" required>
        <br />Password:
        <input type="password" id="password" placeholder="Password" required>
        <br />
        <input type="button" value="Submit" onclick="confirmAccount">
      </p>
    </form>
  </div>
  <div class="rightColumn">
    <h1>Ryan Zhang's Blog</h1>
    <div id="cssmenu">
      <ul>
        <li class="active"><a href="home.html"><span>Home</span></a>
        </li>
        <li><a href="aboutMe.html"><span>About Me</span></a>
        </li>
        <li><a href="tipsNTricks.html"><span>Tips 'n' Tricks</span></a>
        </li>
        <li><a href="inspiration.html"><span>Inspirational Quotes and       Words</span></a>
        </li>
        <li><a href="timeline.html"><span>Timeline of Me</span></a>
        </li>
        <li><a href="contact.html"><span>Contact</span></a>
        </li>
      </ul>
    </div>
    <hr />
    <p>
      Lorem Ipsum
      <br />Upload Date:
      <br />
      <date>25/10/15</date>
    </p>
    <hr />
  </div>
</body>

</html>

为什么我的保证金不起作用？

1 个答案: