个人中心
gpt4 book ai didi

html - 下拉菜单问题及定位

转载 作者：行者123 更新时间：2023-11-28 12:43:42 24 4
gpt4 key购买 nike

我已经使用了一个在线下拉菜单模板，并尝试尽可能多地修改代码，但我完全不知道下一步该怎么做。我正在尝试让菜单以 70% 的宽度居中放置在页面中央，这样这将与图像和文本对齐，但是无论我尝试如何更改，这都不起作用。我环顾四周，有人多次提到相对定位会搞乱

同样在下拉菜单中，我试图摆脱必须使用 em 并开始使用百分比，但每当我尝试将 indexmenu a 的宽度更改为百分比时，它完全破坏了一切。抱歉，如果这不是措辞最好的问题，我只是想提供尽可能多的信息(忽略仅用于布局的颜色和蹩脚图像)

Website link

提前致谢!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
        <link href="slideshow.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="javascript.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Stages School Of Dance</title>
    </head>

    <body>
        <div id="indexmenu">
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="courses.html">Courses</a>
                </li>
                <li><a href="General.html">General Classes</a>
                </li>
                <li><a href="venue.html">Venue</a>
                </li>
                <li><a href="gallery.html">Gallery And Video </a>

                    <ul>
                        <li><a href="#">2007</a>

                            <div class="nav2">
                                <ul>
                                    <li><a href="#">January</a>
                                    </li>
                                    <li><a href="#">February</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">2008</a>

                            <div class="nav2">
                                <ul>
                                    <li><a href="#">March</a>
                                    </li>
                                    <li><a href="#">May</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">2009</a>

                            <div class="nav2">
                                <ul>
                                    <li><a href="#">June</a>
                                    </li>
                                    <li><a href="#">July</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">2010</a>
                        </li>
                        <li><a href="#">2011</a>
                        </li>
                    </ul>
                </li>
                <li><a href="studentlife.html">Student Life</a>
                </li>
                <li><a href="news.html">News</a>
                </li>
                <li><a href="about.html">About</a>
                </li>
            </ul>
        </div>
        <div id="index1">
            <div id="slideshowContainer">
                <div class="slideshow">
                    <img src="4.jpg" />
                    <img src="2.jpg" />
                    <img src="1.jpg" />
                    <img src="3.jpg" />
                    <img src="5.jpg" />
                </div>
            </div>
            <div id="indexaboutus">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit condimentum mi id sodales. Mauris eu nisl nec nibh aliquam cursus ut quis lacus. Duis et erat non sem sollicitudin volutpat a eget lorem. Integer feugiat diam vitae odio auctor gravida. Nullam congue nisi nec felis tristique, id fringilla quam ullamcorper. Cras a sem at justo imperdiet sagittis sodales id eros. Cras tristique urna ipsum, vel sagittis tortor imperdiet ac. Duis volutpat lacus sem, et molestie risus dapibus vitae. Mauris convallis elit sed sapien consectetur fringilla. Nulla consectetur mollis libero, vel eleifend purus rutrum ut. Donec posuere velit leo, et facilisis est vehicula non. Aliquam vel turpis felis. Sed molestie orci sem, in lobortis dui tempor eu. Morbi tempor mauris et aliquam consequat.</p>
                <p>Cras id sodales tellus, ut euismod erat. Nunc mi lacus, lobortis nec metus in, laoreet vehicula enim. Fusce semper velit et augue viverra vulputate. Donec suscipit lorem sed nulla tincidunt sodales. Nullam vehicula arcu sapien, sit amet posuere augue tristique pellentesque. Integer sit amet pretium leo, non lobortis dolor. Vivamus sodales eget leo in rhoncus. Phasellus quis dolor faucibus, convallis metus eget, sodales diam. Nulla scelerisque, magna eget placerat gravida, neque ante fringilla enim, at aliquet tortor nibh accumsan quam. Pellentesque iaculis elementum dolor, sed facilisis felis scelerisque sit amet. Praesent aliquam diam erat, eu pellentesque magna blandit ut. Donec vulputate luctus tellus, at iaculis felis faucibus sit amet. Nam nec diam elit. Integer cursus varius ante, nec ullamcorper risus tristique eu. Fusce sed posuere sem.</p>
            </div>
        </div>
        <div class="logo">
            <img id="logo1" src="logo2.jpg" alt="Slideshow" />
        </div>
    </body>

</html>

CSS

body {

    background-color:green;
}

#index1 {
    padding-top:2%;
    width:70%;
    margin-left:auto;
    margin-right:auto;
}

#indexmenu {
    clear:both;
    border-style:solid;
    margin-left:20%;
}

#indexaboutus {
    width:45%;
    float:right;

}


#slideshowContainer {
    float:left;
    width:35%;

}


.slideshow {
    height: 50%;
}
.slideshow img {
}



#indexmenu {   /*  */
    width:80%;
    position:relative;
    left:13%;
}

.nav2 {   /*  */
    margin-left:-50%;

}


#indexmenu, #indexmenu ul {   /*  */
    padding: 0;
    margin: 0;
    list-style: none;
}

#indexmenu a {    /* changes menu width MUST CHANGE */
    display: block;
        width:10em;
}


#indexmenu ul li a {


}

#indexmenu li {    /* Xhanged all menu text */
    float: left;
        font-size:115%;
}


.nav2 li {    /*Sets year and month  */


}

#indexmenu li ul {    /*Changes year and month text  */
    position: absolute;
    width: 6%;
        font-size:80%;
    left: -999em;
}

#indexmenu li:hover ul {  /*  */
    left: auto;
}


#indexmenu li:hover ul, #nav li.sfhover ul {  /*  */
    left: auto;
}

#indexmenu li ul li {
        margin-left:-50%;
        margin-top:-5%;

}
#indexmenu li ul ul {                 /*  A, B, C, D - A sets the X axis, D sets the Y axis of the months */
    margin: -42% 0 0 180%;

}

#indexmenu li a {                     /*sets all of the links in the id nav, in li and a  */
    text-decoration:none;
    color:white;
    font-weight:bold;
    text-align:center;

}



#indexmenu, #indexmenu ul {              /*  */
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1;
}



#indexmenu li:hover ul ul, #indexmenu li.sfhover ul ul {   /*  */
    left: -999em;
}



#indexmenu li:hover ul, #indexmenu li li:hover ul, #indexmenu li.sfhover ul, #indexmenu li li.sfhover ul {
    left: auto;
}


#indexmenu li ul li a {      /* sets the  month and year in drop down option*/
        font-size:100%;
        margin-top:15%;
}


.logo   {
        clear:both;
        float:left;
        margin-left:15%;
    width:70%;
        padding-top:2%;
}


#logo1 {
    width:100%;
    vertical-align: bottom;
}

最佳答案

只指定一个width , 然后使用 margin:0 auto;还要确保这适用于 <div> .脱下position:relative和其他任何东西。

还要确保设置 text-align:center在<div>以及获得 <li>文本位于中心。

div { margin:0px auto; max-width: 80%; min-width:70%; width: 80%; }
ul { list-style-type:none; }
ul li { display: inline-block; padding:4px 7px; }
ul li a { text-decoration:none; color: black; }

这通常是我用来启动菜单的。我用 max-width因为它似乎限制了 width什么时候width没有。

如果您使用重置 css 文件(在谷歌中搜索重置 css)，则无需设置任何其他属性，例如 <a> width因为它将成为其父级的宽度。与所有其他元素相同，如果您希望它成为 width其内容使用 float:left或 float:right但请确保您输入了 <div style="clear:both"></div>在它之后，父容器变成 height它的 child 。如果不这样做，您会注意到 parent 将没有 height .

这是一个Fiddle帮助您玩弄并弄清楚。

需要观察HTML中的盒模型，看这里Box Model记住 margin padding border outline将添加到您的元素width ，因此请确保在指定 width 时考虑到这一点，因为整体width将包括盒子模型。

关于html - 下拉菜单问题及定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17531196/

24 4 0
文章推荐： html - CSS text-align 属性不考虑文本本身的宽度
文章推荐： css - 变音符号比其他字母粗
文章推荐： php - 动态添加带有动画定位的 HTML
文章推荐： css - 2个具有灵活高度的div，没有滚动条