为什么图标和列表内容不显示在水平线上？

时间：2015-12-07 07:21:22

标签： html5 css3 css-float center

我正在尝试创建3个带有列表的图标，以便在屏幕底部显示，当我使用浮动时：左侧的css。它们显示了我想要的方式，但背景不会包含它们，因为它们不再位于背景内容div中。我也试图将所有3个列表（和图标）都在其中的div居中显示在屏幕的中央，但是当我使用margin-left：auto;和保证金权利：auto;为了使它们居中，div仍然不会浮动到屏幕的中心。

HTML 

<html><!-- InstanceBegin template="/Templates/KendraTemplate.dwt"     codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>kendraRossUtahState</title>
<!-- InstanceEndEditable -->
<link href="../CSS/Main.css" rel="stylesheet" type="text/css">
<style>
.MenuDisplay {
text-decoration:none;
list-style:none;
background-color:#DDD;
}
 .ListItemDisplay {
 display: inline-block;
 margin-top:20px;
 margin-left:2%;
 margin-right:2%;
 margin-bottom:10px;
 }

</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body background="../Images/UtahMoutains-copy7.png" style=" background-  repeat:no-repeat; background-position:center; background-attachment:fixed;   background-size:cover; margin:0px;">
<header>

<div style=" float:left; width:100%; background-color:#DDD;    position:relative; margin:0px;">

        <a href="../index.html"><img src="../Images/utahGovLogo.png" style="  float:left; padding:20px;"></a>

        <img src="../Images/Search Button.png" style="float:right; padding:20px;">

</div>
    <nav style="z-index:9; margin-bottom:20px;">
        <ul style="list-style:none; text-align:center; background- color:#DDD; font-family: Arial,Helvetica, Neue,sans-serif; font-size:120%;  color:#666; margin:0px; margin-left:auto; margin-right:auto;">
            <li class="ListItemDisplay" style="cursor:default;">Government
              <ul class="MenuDisplay">
                    <li><a href="executive.html" class="linkstyle">Executive  Branch</a></li>
                    <li><a href="legislative.html"    class="linkstyle">Legislative Branch</a></li>
                    <li><a href="judicial.html" class="linkstyle">Judicial Branch</a></li>
                </ul><!-- end of  Government  drop down menu-->
            </li><!-- end of Government Button-->

            <li class="ListItemDisplay" style="cursor:default;">About Utah
              <ul class="MenuDisplay">
                    <li><a href="executive.html" class="linkstyle">Recreational</a></li>
                    <li><a href="legislative.html" class="linkstyle">Geographical</a></li>
                </ul><!-- end of  About Utah  drop down menu-->
            </li><!-- end of About Utah Button-->

            <li class="ListItemDisplay" style="cursor:default;">
                <a href="about.html" class="linkstyle">
                    Fun Facts
                </a>
            </li>
        </ul>
    </nav>  
</header>
<!-- InstanceBeginEditable name="EditRegion3" -->
<div class="outerwrapperrec">
<div class="contentrec">
    <div id="graphrec">
        <h2>Utah Recreational Information</h2>
        <div id="innergraphrec">
            <img src="../Images/UtahrecFacts.png" width="470" height="479" alt=""/> 
        </div>
    </div>

    <div class="innerwrapperrec">
        <div class="listItemcontent">
            <p style="text-align:center; color:#FFFFFF;">
                Boaters have the responsibility to practice and advocate safe and ethical use of our waterways. This responsibility includes properly registering boats, learning and obeying boating safety laws and rules, and sharing waterways with other boaters, swimmers, and anglers.
            </p>
        </div>
        <div class="listItemrec">
        <div id="listicon">
            <div id="iconimage">
                <img src="../Images/ohvIcon.png" width="103" height="103" alt="OHV symbol Icon"/>
            </div>

            <ul>
                <li>OHV Trails</li>
                <li>Licensing Information</li>
                <li>Public Safety Info</li>
            </ul> 
        </div>

        <div id="listicon">
            <div id="iconimage">
                <img src="../Images/sailboatIcon.png" width="103" height="103" alt="Boat Symbol Icon"/>
            </div>

            <ul>
                <li>Utah's Lakes</li>
                <li>Boat Licensing Info</li>
                <li>Boating Safty Info</li>
                <li>Water Conservation Info</li>
            </ul> 
        </div>

        <div id="listicon">
            <div id="iconimage">
                <img src="../Images/hikerIcon.png" width="103" height="103" alt="Hiker Symbol Icon"/>
            </div>

            <ul>
                <li>Trails</li>
                <li>Scenic Overlooks</li>
                <li>State Parks</li>
                <li>Hike Safty Info</li>
                <li>Camping & Swimming Info</li>
            </ul> 
        </div>
        </div><!-- End ListItemrec div-->
    </div><!-- End Innerwrapperrec div-->
</div><!-- End Contentrec div-->
</div><!-- End outerwrapperrec div-->

<!-- InstanceEndEditable -->


</body>
<!-- InstanceEnd --></html>

CSS 

html{
width:100%;
height:100%;
min-width:800px;

}

body{
position:relative;
width:100%;
height:100%;
min-width:100px;
}

.header1{
width:100%; 
}

nav ul li ul {
display: none;
width:auto;
clear:both;
position:relative;
text-align:left; 
padding:10px;
height:auto;
width:auto;
}

.MenuDisplay{
z-index:9;  
}

.ListItemDisplay{
z-index:9;
}

nav ul li:hover > ul {
display:block;
position:absolute;
top: 100%;
left:0;
height:auto;
width:auto;
}

nav ul li {
position: relative;
}

nav ul li ul li {
width:180px;
text-align:left;
margin-top:10px;
}

#aboutimages {
height:auto;
}

 #innerwrapperabout {
 height:100%;

 }

 #mainwrapper{
 height:auto;
 width:600px;
 padding:25px;
 min-width:350px;
 position:relative;
 background-color:#00717B;
 display:block;
 margin-left:auto;
 margin-right:auto;
 }

 #mainwrapperabout{
 height:100%;
 width:100%;
 position:relative;
 float:left;
 }

 #contentwrapperabout{
 height:100%;
 width:800px;
 margin-left:auto;
 margin-right:auto;
 position:relative;
 display:block;
 }

 #aboutimagepng{
 width: 100%;
 height:auto;
 min-width:50px;
 display:block;
 margin-left:auto;
 margin-right:auto;
 }

 .a-btn{
 background: #f0ad4e;
 border-radius: 50%;
 position:absolute;
 padding:10px;
 display:block;

 }

 .linkstyle{
 text-decoration:none;
 color:inherit
 }

 .a-btn span{
 border-radius: 50%;
 display: block;
 color:#FFF;
 font-family:Arial, Helvetica, sans-serif;
 text-align:center;
 padding:3px;
 width:auto;
 line-height:normal;
 position:relative;
 }
 .a-btn span:nth-child(1), 
 .a-btn span:nth-child(3),
 .a-btn span:nth-child(4),
 .a-btn span:nth-child(5){
 position: relative;
 opacity: 0;
 }
 .a-btn span:nth-child(1){
 opacity: 0.2;
 position:relative;
 }
 #bubble1:hover{
 background-image:url(../Images/saltlakecityskyline2.png);
 background-repeat:no-repeat;
 background-position: -40px -50px;

 }

 #bubble2:hover{
 background-image:url(../Images/Dinosour2.png);
 background-repeat:no-repeat;
 background-position: -250px -0px;
 }

 #bubble3:hover{
 background-image:url(../Images/California-Seagull_DARKER.png);
 background-repeat:no-repeat;
 background-position: -50px 0px;
 }

 #bubble4:hover{
 background-image:url(../Images/Honey-Bee_DARKER.png);
 background-repeat:no-repeat;
 background-position: -108px -2px;
 }

 #bubble5:hover{
 background-image:url(../Images/Rocky%20Mountain%20Elk_DARKER.png);
 background-repeat:no-repeat;
 background-position: -50px 0px;

 }

 .a-btn:hover span:nth-child(3){
 opacity: 1;
 position:relative;
 }
 .a-btn:hover span:nth-child(4){
 opacity: 1;
 position:relative;
 }

 .a-btn:hover span:nth-child(5){
 opacity: 1;
 position:relative;
}
.a-btn:hover span:nth-child(2){
opacity: 0;
position:relative;

}

#aboutimagemain {
display:block;
float:left;
padding:30px;
width:300px;
height:auto;
background-color:#5B9CB0;
margin:10px;

}

#aboutimage1 {
clear:both;
width:auto;


}

#mainwrapperlegislative {
height:100%;
width:760px;
min-width:350px;
position:relative;
margin-left:auto;
margin-right:auto;
background-color:#00717B;

}

#legislativeislands{
margin-left:auto;
margin-right:auto;
width:780px;
position:relative;
height:100%;

}

.outerwrapperrec{
width:100%;
}

.contentrec{
margin-left:auto;
margin-right:auto;
}

.innerwrapperrec{
background-color:#00717B;
padding:20px;
margin-left:auto;
margin-right:auto;
width:800px;
}

#listicon{
color:#FFF;
display:block;
width:200px;
position:relative;
}

#iconimage{
}

#graphrec{
text-align:center;
}

#innergraphrec{
margin-left:auto;
margin-right:auto;
}

.listItemrec{
margin-left:auto;
margin-right:auto;
position:relative;
}

0 个答案:

没有答案
相关问题
最新问题