Question

这是我遇到问题的一个例子：

因此，当我滚动时，导航栏也会因固定属性而破坏外观，如何让它在滚动条上消失？

也可以有人建议我，如果这是一个好的开始，如果有更多的事情我应该照顾。我想为随机小部件制作正确的一面，并为内容制作左侧。

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Design
</head>
<style>
	/* Body style */
	body {
		margin: 0;
		padding: 0;
		font-size: 12px;
		
	}
	
	/* Logo */
	.header {
		position: relative;
		margin: 0;
		padding: 0;
		display: block;
		height: 50px;
		background: #fff !important;
		padding: 8px 16px;		
	}
	.logo-1 {
    font-family: Helvetica, "serif";
    text-decoration: none;
    font-size: 37px;
    letter-spacing: 3px;
	font-weight: 900;
    color: #555555;
    display: block;
	}
	
	/* Navigation */
	.navbar {
		Position: fixed;
		width: 100%;
		background: #333333;
	    list-style-type: none;
		text-decoration: none;
		margin: 0;
		padding: 0;
		text-align: center;

	}
	
	li {
		float: left;
	}
	
	 li a {
		display: block;
		padding: 14px 16px;
		color: #eee;
		text-decoration: none;
		text-align: center;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	}
	
	 li a:hover:not(.active) {
		background: #111111;
	}
	
	 .active {
		background-color: #008cba;
	}
	
	/* Widget */
	.widget {
		position:relative;
		bottom: -42px;
		float: right;
		overflow: hidden;
		width: 190px;
		border-left: 1px solid #9fa2a9;
		display: block;
		padding: 2px 5px;
	}
	
	</style>
<body>
	<div class="header"><a class="logo-1" href="#">Test Design</a></div>
<!-- Navigation -->
<ul class="navbar">
	<li><a class="active" href="#">Home</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	<li style="float: right"><a class="active" href="#">Register</a></li>
	<li style="float: right"><a href="#">Login</a></li>
	</ul>
<!-- Widget -->
<div class="widget">

	<b><u>Random bullshit lorem-ispum</u></b>
	<form action="#" method="post">
    <div>
         <label for="name">Text Input:</label>
         <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>

    <div>
         <h4>Radio Button Choice</h4>

         <label for="radio-choice-1">Choice 1</label>
         <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

     <label for="radio-choice-2">Choice 2</label>
         <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
    </div>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>

  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>

  <div>
      <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" id="checkbox" />
    </div>

  <div>
      <input type="submit" value="Submit" />
    </div>
</form>
</div>
</body>
</html>

＆＃13;

Answer 1

.navbar {
    position: relative;
    background: #333333;
    list-style-type: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

更改导航栏位置 -

Answer 2

试试这个CSS

问题在这里，您正在使li元素向左浮动，因此其父ul高度被抵消，为了保持其高度，您需要一个clearfix。

CSS

body {
        margin: 0;
        padding: 0;
        font-size: 12px;

    }

    /* Logo */
    .header {
        position: relative;
        margin: 0;
        padding: 0;
        display: block;
        height: 50px;
        background: #fff !important;
        padding: 8px 16px;      
    }
    .logo-1 {
    font-family: Helvetica, "serif";
    text-decoration: none;
    font-size: 37px;
    letter-spacing: 3px;
    font-weight: 900;
    color: #555555;
    display: block;
    }

    /* Navigation */
    .navbar {
        width: 100%;
        background: #333333;
        list-style-type: none;
        text-decoration: none;
        margin: 0;
        padding: 0;
        text-align: center;

    }

  .clearfix::after{
    content:"";
    display:table;
    width:100%;
    clear:both;
  }

    li {
        float: left;
    }

     li a {
        display: block;
        padding: 14px 16px;
        color: #eee;
        text-decoration: none;
        text-align: center;
    background-color: #212121;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    }

     li a:hover:not(.active) {
        background: #111111;
    }

     .active {
        background-color: #008cba;
    }

    /* Widget */
    .widget {
        position:relative;
        bottom: -42px;
        float: right;
        overflow: hidden;
        width: 190px;
        border-left: 1px solid #9fa2a9;
        display: block;
        padding: 2px 5px;
    }

Link for reference 希望这有助于..

Answer 3

/ *导航* /

.navbar {
        Position: absolute;
        width: 100%;
        background: #333333;
        list-style-type: none;
        text-decoration: none;
        margin: 0;
        padding: 0;
        text-align: center;

    }

导航栏的问题，如何使其不固定？

3 个答案: