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

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

html css

Html 社交媒体按钮不适合导航区域,html,css,Html,Css,大家好，我有一个问题，我的网站社交媒体按钮不在导航标题区。我已经尝试过使用float属性，但它不会停留在标题中。这里有一些图片向您展示我正在谈论的内容正如您在这张图片中看到的，社交媒体按钮不会停留在标题区域，任何帮助都将不胜感激。提前谢谢 <!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width,

大家好，我有一个问题，我的网站社交媒体按钮不在导航标题区。我已经尝试过使用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;
}

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

将代码放在表中

我不能百分之百地理解。你是要我在css中注释掉600px样式，然后在我的社交媒体周围添加一个li标签？嗯，你的ul（宽度为600px）太小，无法包含此div。好的，我更改了代码，使nav ul占据页面的100%宽度，现在我的社交媒体在标题中，但我的导航链接不再居中。看看这张图片。谢谢你的帮助，我想我已经完全明白了：