如何将 Logo 添加到我的无序列表中，以便将整个栏变成粘性导航栏？我一直在互联网上搜索如何执行此操作并放弃了。我正在向你寻求建议。
我在当前页面上设置了一个基本导航，只有三个链接( Logo 还不可点击)，我想让它们都成为我导航栏的一部分。现在，三个要点与 Logo 分开使用。我希望他们都移动并充当一个酒吧。当您向下滚动页面时，我希望固定此栏。我该如何做到这一点？ HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="critical theory, mass media, marketing online, mass marketing, social media marketing, viral marketing, viral coefficient, new media, social media" />
<meta name="description" content="Tips & Tricks in Social Media Marketing: A Guide to Viral Marketing" />
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
<title> Viral Marketing A-Z | A Critical Guide to New Media</title>
<link href="newmedia.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--style1 {font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, Myriad Pro', Helvetica, Arial, sans-serif}-->
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<p align="left"><img src="C:\Users\user\Desktop\virael\assets\virael-logo.jpg"
alt="logo"/></p>
</div>
<div id="menu">
<ul><p align="right">
<li><a class="button" href="#">Media</a></li>
<li><a class="button" href="#">Resources</a></li>
<li><a class="button" href="#">Blog</a></li>
</p>
</div>
</ul>
CSS:
#logo{
background-repeat: no-repeat;
background-position: right top;
margin-left: auto;
margin-right: auto;
float: left;
margin: 0px 30px 0px 25px;
overflow: hidden;
#menu {
float: both;
overflow: hidden;
ul {
float: left;
list-style-type:none;
text-align:center;
margin: 0;
padding: 0;
li {
display: inline-block;
text-align: center;
a:link, a:visited {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,
'Myriad Pro', Arial, sans-serif;
display: block;
font-size: 18pt;
font-weight: bold;
width: 256px;
color: black;
background-color: white;
text-align: center;
padding: 16px;
text-decoration: none;
text-transform: capitalize;
a:hover, a:active {
color: purple;
最佳答案
事情是这样的:
HTML
<div id="menu" class="sticky">
<div class="inner">
<a href="index.html" class="logo"><img src="C:\Users\user\Desktop\virael\assets\virael-logo.jpg" alt="logo"/></a>
<ul>
<li><a class="button" href="#">Media</a></li>
<li><a class="button" href="#">Resources</a></li>
<li><a class="button" href="#">Blog</a></li>
</ul>
</div>
</div>
CSS
.sticky { position:fixed; height:75px; width:100%; top:0; left:0;}
.sticky .inner { width:75%; margin:0 auto;}
.inner:after { clear:both; content:""; height:0px; visibility: hidden; display:block;}
.sticky .logo { float:left;}
.sticky ul { float:right;}
.sticky ul li { display:inline-block;}
请注意，这会让您的粘性内容穿过屏幕，内部将是一个居中的布局 block ，当然可以根据您的需要更改样式和宽度。如果您有任何问题，请告诉我。
关于html - 如果我在左侧有一个可点击的 Logo ，我仍然可以使用粘性(固定)水平导航栏吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24378921/