Question

嘿大家我遇到的问题是我网站的社交媒体按钮没有停留在导航标题区域。我尝试过使用float属性，它不会停留在标题中，这里有一些图片可以告诉你我在说什么。

正如您在此图片中所看到的，社交媒体按钮不会停留在标题区域，任何帮助将不胜感激。提前谢谢。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">

<header>

<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li><a href="#">Moonshine</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">The Blog</a></li>
<li><a href="#">The Store</a></li>

<div id="socialMedia">
<a href="#"> <img src="imgs/fbsm.png" alt=""/></a>
<a href="#"><img src="imgs/tsm.png" alt=""/></a>
<a href="#"><img src="imgs/psm.png" alt=""/></a>
</div>

</ul>

<a href="#" id="pull">Skull&reg;</a>

</nav>

</header>

<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">



<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>





<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull&reg;
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol.  </p>

<img src="imgs/skullBrand.png" alt=""/>
</div>





<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>

<img src="imgs/skullBrand.png" alt=""/>
</div>





<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>

<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>

</div>





<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>

<img src="imgs/dry.jpg" height="200" alt=""/>

</div>





<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>

<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>

</div>





<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>

<img src="imgs/wr.jpg" alt=""/>
</div>





<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>


<img src="" alt=""/>
</div>



</div>
</div>

<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>

</div><!--containerEnd-->

</body>
</html>
    /* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
body {
    width: 1920px;
    background-color: #202021;
}
#container{
    width: 100%;
    margin: 0;

    background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
    width: 100%;
    height: 100px;
}
nav{
    width: 100%;
    height: 100px;
    position: relative;
    border-bottom: 2px solid #cccccc;

}
#brand{
    margin-top:15px;
    width: 250px;
    height: 70px;
    float: left;
    background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
    display: none;
}
nav ul{
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 100px;
    list-style: none;
    color: #fff;
    border-bottom: 2px solid #cccccc;
}
nav li{
    display: inline;
    float: left;
}
nav a{
    color: #fff;
    display:inline-block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    line-height: 100px;
}
nav li a{
    border-right: 1px solid #cccccc;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
nav li:first-child a{
    border-left: 1px solid #cccccc;
}

nav a:hover, nav a:active {
    color: #ffffff ;
}

#socialMedia{
    width: 320px;
    float: right;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
    width: 100px;
}
nav a#pull {
    display: none;
}
#content {
    text-align: center;
}
#story{
    margin: auto;
    line-height: 2;
    width: 300px;
    height: 200px;

}
#ourStory, #bootleg, #storyBoard{
    text-align: center;
    color: #ffffff;
}

Answer 1

您的导航ul宽度为600px。它太小，不能包含所有这些元素。因此div在下一行。我也更喜欢在语义上改变div，比如ul。

Answer 2

将您的代码放在表格中 <table width="646" border="0"> <tr><td width="98"><ul class="clearfix"><li><a href="#">Moonshine</a></li></td><td width="82"><li><a href="#">Recipes</a></li></td><td width="88"><li><a href="#">The Blog</a></li></td><td width="110"><li><a href="#">The Store</a></li></td>``<td width="78"><div id="socialMedia"><a href="#"><img src="imgs/fbsm.png" alt=""/></a></div></td><td width="78"><div id="socialMedia"><a href="#"><img src="imgs/tsm.png" alt=""/></a></div></td><td width="82"><div id="socialMedia"><a href="#"><img src="imgs/psm.png" alt=""/></a></div></td></tr></table></ul>

社交媒体按钮不适合导航区域

2 个答案: