使用padding-left

Question

我的班级有两个关于我网站的具体问题。

首先，我的浮动左侧垂直导航栏妨碍了我网站主题/类型页面上的不同部分。

每当我转到此页面时，默认情况下导航栏会将我的第一部分（＆＃34; Horror＆＃34;）推到右侧。这很好，我希望我的所有部分永久移动到右边，这样我的导航栏就不会浮动在我的任何部分上。但是，现在只有第一部分向右移动，而导航栏“＃34;浮动＆＃34;向下，导航栏要么直接漂浮在各个部分上，要么这些部分会变形，看起来很奇怪。

以下是Theme.html页面代码。我只包括第一个＆＃34;部分＆＃34;为了简洁起见。

<!DOCTYPE html>
<html lang="en">
<head>
<link href="favicon-animated%20dice.ico" rel="icon" type="image/x-icon">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Rolling Solo Theme/Genre</title>
<meta charset="utf-8">
<link rel="stylesheet" href="rollingsolo.css" type="text/css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="js/float-panel.js"></script>
</head>

<body>
<div id="wrapper">
<header>
<div id="header">
<h1>Rolling Solo</h1>
<h2>"I Roll Solo"</h2>
</div>
</header>

<div id="headings">
<h1>Board Games Theme &amp; Genre</h1>
</div>    

<div id="nav" class="float-panel">
<nav class="navigation"><!--Added .navigation-->
<ul class="mainmenu"><!--Added .mainmenu-->
    <li><a href="index.html">Home</a></li>
    <li><a href="theme.html">Theme/Genre></a>
        <ul class="submenu"><!--Added .submenu-->
            <li><a href="#Horror">Horror</a></li>
            <li><a href="#Sci-Fi">Sci-Fi</a></li>
            <li><a href="#Survival">Survival</a></li>
            <li><a href="#Pirate">Pirate</a></li>
            <li><a href="#RPG">RPG/Fantasy</a></li>
            <li><a href="#Space">Space</a></li>
            <li><a href="#Apocalypse">Nuclear Apocalypse</a></li>  
        </ul>
    </li>
    <li><a href="top.html">Top Solo Games of 2017</a></li>
    <li><a href="variants.html">Variants</a></li>
    <li><a href="about.html">About Me</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>

<main>
    <section id="Horror"class="sections"><h3>Horror</h3>
    <hr>
    <a href="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg"><img  src="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg" height="80" width="80" alt="arkham horror pic" class="images"></a>
    <p>Arkham Horror is a great deck building game.</p>
    <br>
    <a href="theme/Kingdom%20Death-Monster(medium).jpg"><img src="theme/Kingdom%20Death-Monster(medium).jpg" height="80" width="80" alt="kingdom death monster pic" class="images"></a>
    <p>This game was a mega-hit during its Kickstarter campaign last year.  Extremely in demand and a great buy, if you can get your hands on it.</p>
    <br>
    </section>

我查看了我的CSS课程＆＃34;部分＆＃34;并多次尝试将蓝色边框向右移动，但仍然无法做到。

以下是我的CSS代码，主题/流派的部分和导航代码：

.sections {border-style: ridge; /*adjusts the Theme/Genre Sections*/
       border-width: 10px;
       border-color: #1D3D94;
       padding-left: 20px;
       padding-right: 20%;
       overflow:auto;}

.images {float: left;   /*adjust the pics in the Theme/Genre Sections*/   
     padding-top: 10px;
     padding-right: 10px;}

 #nav {float: left; width: 200px; margin: 10px 0;}

/* define a fixed width for the entire menu */
.navigation {width: 190px;} 

/* reset the lists to remove bullet points and padding */
.mainmenu, .submenu {list-style: none;
                 padding: 0;
                 margin: 0;}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {display: block;
         background-color: #CCC;
         text-decoration: none;
         padding: 10px;
         color: #000;}

/* add hover behavior */
.mainmenu a:hover {background-color: #C5C5C5;}

/* when hovering over a .mainmenu item,
display the submenu inside it.*/
.mainmenu li:hover .submenu {display: block;
                         max-height: 200px;}

/*Now, overwrite the background-color for .submenu links only.
.submenu a {background-color: #999;}

/* hover behavior for links inside .submenu */
.submenu a:hover {background-color: #666;}

/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.*/
.submenu {overflow: auto;
      max-height: 0;
      -webkit-transition: all 0.5s ease-out;}

有没有办法让永久将这些部分移到导航栏的右边？

其次，我不希望在嵌套的指令中使用滚动条功能，而是在我的鼠标悬停在＆＃34;主题/流派＆gt;＆＃34;上时，将所有部分显示在一起。在导航栏中标题。截至目前，它只显示七个子目录中的五个，然后必须使用滚动条向下滚动才能看到其余的。

如何删除滚动条并显示所有七个子目录？

非常感谢您提供的任何和所有帮助。我很感激。

Answer 1

使用padding-left

确保列出的项目位于“＆＃39;容器”中。这样容器内的所有孩子都可以坐在父母所在的任何地方。这允许您对内容使用以下CSS规则（例如，id为#content）：

#content {
    position: relative;
    padding-left: 5em;
    box-sizing: border-box;
    width: 100%;
}

说明

position: relative - 确保孩子遵守父母的基本规则
padding-left: 5em - 将父级（内容）推送到菜单右侧5em，所有孩子都将相对于父级
box-sizing: border-box - 保持所有填充相对于容器宽度和高度的内部（通过减去大小），而不是动态地附加大小。
width: 100% - 让容器填满空间的其余部分（1）

1）如果宽度：100％超出菜单空间，则考虑使用width: calc(100% - 5em)，其中5em是菜单的宽度

注意值得考虑的是，为此，您通常需要一个固定/最大宽度菜单，这样做非常理想。否则文本，图像等可能会在该空间的一定百分比内无限扩展菜单。

元素：悬停

要消除菜单上的滚动条，您必须找到占用空间的内容。如果当光标位于菜单项上方时，您想要显示/隐藏的项目更多，则可以使用元素选择器：悬停，可以告诉菜单隐藏某些项目。然后，您可以在悬停事件发生之前和悬停事件期间使用它进行设置。例如：

body { background: white; }
body:hover {background: red;}

一个更相对的例子是设置主菜单项的高度，以便其余部分无法显示（使用overflow: hidden）

ul li ul li {display: none};
ul li:hover ul li {display: block}

Answer 2

您可以使用css :hover州处理子菜单项。

您可以按照以下方式放置菜单和内容：

<div class="site-container">
   <nav class="menu"><!-- Your menu--></nav>
   <main><!-- Your main content--></main>
</div>

并在display: flex;上添加.site-container。

将菜单的宽度设置为200px，例如

主要内容的宽度为calc(100% - 200px);

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
}

/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
  box-sizing: border-box;
}

.site-container {
  display: flex;
  flex-flow: row wrap;
}

.menu {
  width: 200px;
}

.menu ul {
  padding: 0;
  background: #C5C5C5;
  margin-top: 0;
  list-style: none;
}

.menu nav > ul {
}

.menu ul li a {
  display: block;
  padding: 5px;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.menu ul li a:hover {
  color: white;
}

.menu ul li.has-child {
  background: #5B5B5B;
}

.menu ul li.has-child li {
  display: none;
  background: #8E8E8E;
}

.menu ul li.has-child:hover li{
  display: block;
}

main {
  /*Total size minus the menu size*/
  width: calc(100% - 200px);
  padding: 10px;
}

main h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.theme-item {
  border: 4px solid black;
  padding: 20px;
  margin-bottom: 50px;
}

.theme-title {
  position: relative;
  margin-bottom: 40px;
}

.theme-title:before {
  position: absolute;
  content: '';
  display: block;
  width: 80%;
  height: 3px;
  background: black;
  top: calc(100% + 10px);
  left: 0;
}

.games-list {
  padding: 0;
  list-style: none;
}

.games-list .game {
  width: 100%;
  margin-bottom: 30px;
}

/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
  content: '';
  display: table;
  clear: both;
}

.games-list .game img {
  float: left;
}

.games-list .game .description {
  float: left; 
  padding-left: 15px;
}

<div class="site-container">
  <div class="menu">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li class="has-child">
          <a href="#">Theme/Genre</a>
          <ul>
            <li><a href="#">Sci-Fi</a></li>
            <li><a href="#">Survival</a></li>
            <li><a href="#">Pirate</a></li>
            <li><a href="#">RPG/Fantasy</a></li>
            <li><a href="#">Horror</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Aventure</a></li>
          </ul>
        </li>
        <li><a href="#">Top Solo Games of 2017</a></li>
        <li><a href="#">Variants</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
  <main>
    <h1>Board Games Themes & Genre</h1>
    <div class="theme-list">
      <div class="theme-item">
        <h2 class="theme-title">Horror</h2>
        <ul class="games-list">
          <li class="game">
            <img src="http://via.placeholder.com/150x150" />
            <p class="description">A good game</p>
          </li>
          <li class="game">
            <img src="http://via.placeholder.com/150x150" />
            <p class="description">Another game</p>
          </li>
        </ul>
      </div>
      <div class="theme-item">
        <h2 class="theme-title">Sci-Fi</h2>
        <ul class="games-list">
          <li class="game">
            <img src="http://via.placeholder.com/150x150" />
            <p class="description">A good game</p>
          </li>
          <li class="game">
            <img src="http://via.placeholder.com/150x150" />
            <p class="description">Another game</p>
          </li>
        </ul>
      </div>
    </div>
  </main>
</div>

您可以通过使用position: fixed; top: 0; left: 0; z-index: 2;修复屏幕左上角的菜单来进行改进，因此它始终可见。并在子菜单上设置position: absolute; left:100%; top: 0;，在父li 设置position: relative;，这样子菜单就会显示在菜单的右侧。它会阻止菜单做“溜溜球”。

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
}

/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
  box-sizing: border-box;
}

.site-container {
  position: relative;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 200px;
}

.menu ul {
  padding: 0;
  background: #C5C5C5;
  margin-top: 0;
  list-style: none;
}

.menu ul li a {
  display: block;
  padding: 5px;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.menu ul li a:hover {
  color: white;
}

.menu ul li.has-child {
  background: #5B5B5B;
  position: relative;
}

.menu ul li.has-child ul {
  display: none;
  background: #8E8E8E;
  position: absolute;
  left: 100%;
  top: 0;
}

.menu ul li.has-child:hover ul{
  display: block;
}

main {
  padding-left: 210px;
  padding-right: 10px;
}

main h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.theme-item {
  border: 4px solid black;
  padding: 20px;
  margin-bottom: 50px;
}

.theme-title {
  z-index: 1;
  position: relative;
  margin-bottom: 40px;
}

.theme-title:before {
  position: absolute;
  content: '';
  display: block;
  width: 80%;
  height: 3px;
  background: black;
  top: calc(100% + 10px);
  left: 0;
}

.games-list {
  padding: 0;
  list-style: none;
}

.games-list .game {
  width: 100%;
  margin-bottom: 30px;
}

/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
  content: '';
  display: table;
  clear: both;
}

.games-list .game img {
  float: left;
}

.games-list .game .description {
  float: left; 
  padding-left: 15px;
}

<div class="site-container">
  <div class="menu">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li class="has-child">
          <a href="#">Theme/Genre</a>
          <ul>
            <li><a href="#">Sci-Fi</a></li>
            <li><a href="#">Survival</a></li>
            <li><a href="#">Pirate</a></li>
            <li><a href="#">RPG/Fantasy</a></li>
            <li><a href="#">Horror</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Aventure</a></li>
          </ul>
        </li>
        <li><a href="#">Top Solo Games of 2017</a></li>
        <li><a href="#">Variants</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
  <main>
    <h1>Board Games Themes & Genre</h1>
    <div class="theme-list">
      <div class="theme-item">
        <h2 class="theme-title">Horror</h2>
        <ul class="games-list">
          <li class="game">
            <img src="http://via.placeholder.com/150x150" />
            <p class="description">A good game</p>
          </li>
          <li class="game">
            <img src="http://via.placeholder.com/150x150" />
            <p class="description">Another game</p>
          </li>
        </ul>
      </div>
      <div class="theme-item">
        <h2 class="theme-title">Sci-Fi</h2>
        <ul class="games-list">
          <li class="game">
            <img src="http://via.placeholder.com/150x150" />
            <p class="description">A good game</p>
          </li>
          <li class="game">
            <img src="http://via.placeholder.com/150x150" />
            <p class="description">Another game</p>
          </li>
        </ul>
      </div>
    </div>
  </main>
</div>

垂直导航栏移动网站的其他部分/删除滚动条

2 个答案:

使用padding-left

说明

元素：悬停