个人中心
gpt4 book ai didi

html - 我怎样才能让这个菜单的 "clear:both"在谷歌浏览器中工作？

转载 作者：太空宇宙 更新时间：2023-11-03 18:20:39 25 4
gpt4 key购买 nike

我构建了一个简单的网站，其中的导航菜单应用了 clear:both CSS 样式。在这个网站上，有一个基本的标志和一组图标。 Logo 向左浮动，而图标向右浮动。该站点在 Firefox 和 Chrome 中看起来像这样...

http://i.stack.imgur.com/nPYuL.jpg

不同之处在于 Chrome 不接受 CSS 文件中的 clear:both(应用于菜单的 div)。我怎样才能让它发挥作用？

这是 HTML...

<!DOCTYPE html>
<html><head>

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />



<script type="text/javascript">

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
  </script>


    <title>Matiny's Sample Site 1</title>
</head>


<body onLoad="MM_preloadImages('images/thumbs/A%20Thumbnail%202.jpg','images/thumbs/B%20Thumbnail%202.jpg','images/thumbs/S%20Thumbnail%202.jpg','images/thumbs/J%20Thumbnail%202.jpg','images/thumbs/T%20Thumbnail%202.jpg','images/thumbs/P%20Thumbnail%202.jpg','images/thumbs/A Thumbnail 2.jpg','images/thumbs/B Thumbnail 2.jpg','images/thumbs/S Thumbnail 2.jpg','images/thumbs/J Thumbnail 2.jpg','images/thumbs/T Thumbnail 2.jpg','images/thumbs/P Thumbnail 2.jpg')">


<div id="main">

    <div id="logo">
        <img src="images/Icons/Logo.png"/>
    </div>

    <div id="sm-icons">
        <ul>
            <li><a href="http://www.facebook.com"><img src="images/Icons/facebook_64.png" id="Image7" onMouseOver="MM_swapImage('Image7','','images/Icons/facebook_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a>
          <li><a href="https://www.rss.com/"><img src="images/Icons/rss_64.png" id="Image8" onMouseOver="MM_swapImage('Image8','','images/Icons/rss_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a>
          <li><a href="https://twitter.com/"><img src="images/Icons/twitter_64.png" id="Image9" onMouseOver="MM_swapImage('Image9','','images/Icons/twitter_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a>
          <li><a href="https://www.youtube.com/"><img src="images/Icons/youtube_64.png" id="Image10" onMouseOver="MM_swapImage('Image10','','images/Icons/youtube_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a>
      </ul>
    </div>

  <div id="menu">
    <ul>
        <li><a href="index.html">WELCOME</a></li>

        <li><a href="#">ABOUT</a>

            <ul>
                <li><a href="">The Man</a></li>
                <li><a href="">The Myth</a></li>
                <li><a href="">The Legend</a></li>
            </ul>

        </li>

        <li><a href="games.html">GAMES</a>

            <ul>
                <li><a href="galleries/Ezio.html">Assasin's Creed 2</a></li>
                <li><a href="galleries/Bruce.html">Batman Arkham City</a></li>
                <li><a href="galleries/Rico.html">Just Cause 2</a></li>
                <li><a href="galleries/Prince.html">Prince of Persia</a></li>
                <li><a href="galleries/Boss.html">Saints Row 3</a></li>
                <li><a href="galleries/TDU2.html">Test Drive Unlimited 2</a></li>
            </ul>

        </li>

        <li><a href="contact.html">CONTACT</a></li>
    </ul>

 </div>

这是 CSS...

/* CSS Document */

/* Reset */

html, body { margin: 0; padding: 0; border: 0;  background: #000; font-size:16px; }


h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:100%;
    font-weight: normal;
    font-style: normal;
    line-height: 100%; 
    text-indent: 0;
    text-decoration: none;
    color: #000;
    }

/* Divisions */



#main { width:900px; margin:0 auto; background-color:#FFF; padding: 30px 100px;}

#logo { margin:30px; float:left}

#sm-icons { float:right; }
#sm-icons ul li  {display:inline}
#sm-icons ul {margin-top: 30px}

#menu {clear:both;
    width: 800px;
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
    z-index: 6;
    position: relative;
} 
#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu ul li {
    float: left;
    position: relative;
}
#menu ul li a {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 100%;
    color: #CCC;
    text-decoration: none;
    background-color: #333;
    text-align: center;
    display: block;
    height: 50px;
    width: 200px;
    line-height: 50px;

    transition: background .5s, font-size .2s;
}
#menu ul li a:hover {
    font-size: 120%;
    color: #000;
    background-color: #CCC;
}
#menu ul li ul {
    position: absolute;
}
#menu ul li ul li a {
    visibility: hidden;
    height: 0px;
    opacity:.5;

    transition: all .2s ease-out;
}
#menu ul li:hover ul li a {
    height: 50px;
    visibility: visible;
    opacity:1;
    transition: all .3s ease-out;

}


#banner-pictures {margin-bottom: 50px}

#central-content    { width: 800px; text-align:center; margin:25px auto;}

#central-max width  { width: 100%; }

#footer {clear:both; border-top: 1px #666 solid}


/* Text Elements */

p               { color:#000; font-size:14px; line-height:120%;
                    margin:15px 0; margin-bottom: 30px  }
p .left         { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right        { margin: 1.5em 0 1.5em 1.5em; padding: 0; }



blockquote      { color:#000; font-size:12px; }

strong          { font-weight: bold; }
em              { font-style: italic; }

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color:#000 }

h1 { font-size:24px; }
h2 { font-size:22px; padding-bottom: 15px; }
h3 { font-size:18px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

/* Misc */

.date {}
.footer-text {text-align:center}
.thumbs {padding: 10px}


#wrapper {
    display: block;
    height: 300px;
    width: 900px;
    margin: auto;
}
#container { display:block; background-color:#FFC; float:left;
height: 300px; width: 900px; overflow:auto; }

#slider {
    display: block;
    float: left;
    height: 300px;
    width: 900px;
    overflow: hidden;
    position: absolute;
    z-index: 4;
}

.slides {
    width: 900px;
    overflow: hidden;
    margin: 0 auto;
    text-align:center;
}

ul, li {
    margin: 0;
    padding: 0;
}

.slides ul { 
    width: 5400px;
    position: relative;
    -moz-animation: slide 36s infinite;
    -webkit-animation: slide 36s infinite;
    }

.slides li { 
    float:left; 
    list-style: none;
    position: relative;
    }
.slides a { text-decoration:none;}

h5 {
    position:absolute;
    bottom: 5px;
    width: 100%;
    background: rgba(0,0,0,.4);
    color: white;
    padding: 20px 10px;
    font-size:24px;
    margin-bottom: 0;
    -moz-animation: headings 36s infinite;
    -webkit-animation: headings 36s infinite;
}

.slides ul:hover,
.slides ul:hover h5  {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}


@-moz-keyframes slide {
    0%  {left: 0;}
    15% {left: 0;}

    20%, 30% {left: -900px;}
    35%, 45% {left: -1800px;}
    50%, 60% {left: -2700px;}
    65%, 75% {left: -3600px;}
    80%, 90% {left: -4500px;}

    100%{left:0px;} /* Reset to Zero */
}

@-moz-keyframes headings {
    15%, 20%, 30%, 35%, 45%, 50%, 60%, 65%, 75%, 80%, 90% 
    {bottom: 5px;}
    18%, 33%, 48%, 62%, 78%, 93% /* 2% before the 1st column */
    {bottom: -200px;}
}

@-webkit-keyframes slide {
    0%  {left: 0;}
    15% {left: 0;}

    20%, 30% {left: -900px;}
    35%, 45% {left: -1800px;}
    50%, 60% {left: -2700px;}
    65%, 75% {left: -3600px;}
    80%, 90% {left: -4500px;}

    100%{left:0px;} /* Reset to Zero */
}

@-webkit-keyframes headings {
    15%, 20%, 30%, 35%, 45%, 50%, 60%, 65%, 75%, 80%, 90% 
    {bottom: 5px;}
    18%, 33%, 48%, 62%, 78%, 93% /* 2% before the 1st column */
    {bottom: -200px;}
}

最佳答案

最好在顶部元素周围包裹一个 div，并将其设置为 overflow: hidden。但是，如果您想保留 HTML，请在菜单上尝试相同的操作:

#menu {
    overflow: hidden;
}

(在测试您的代码时为我工作。)

关于html - 我怎样才能让这个菜单的 "clear:both"在谷歌浏览器中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21896413/

25 4 0
文章推荐： ruby - Gem 安装不会创建指向 bin 的链接
文章推荐： html - 如何进行以下更改(表格元素样式)
文章推荐： Ruby nil 转换为_date
文章推荐： css - 使div溢出:hidden effective without positioning it
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com