个人中心
gpt4 book ai didi

html -

转载 作者：行者123 更新时间：2023-11-28 17:46:54 26 4
gpt4 key购买 nike

我正在尝试使用通常的选择和选项创建下拉列表。但是，它不会起作用。我什么都试过了。

但是如果我把它移到页脚，它就可以了!代码中的内容阻止下拉列表在 <aside> 中工作？

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Intrepid</title>
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<header>
<img src="Images/banner2.png">
</header>
<nav><div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>Destinations</span></a>
<a href='#'><span>Holidays Packages</span></a>
<a href='#'><span>Make a Booking</span></a>
</div>
</nav>
<body>
<content>
<div id="container"><img src="Images/picturebanner.png" height="360" width="980"    alt="Paris">
<aside>

<select>
<option value="volvo" selected="selected">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

</aside>


<section>
    <img src="Images/photo-icon.png"><p>blashasakdsakjfdhsakfj djbfsdj sdhjfbsdjkfbs sdhjfbsdsn j h hcjh bhj  h  h db jh j </p>

</section>
<section>
    <img src="Images/photo-icon.png"><p>blashasakdsakjfdhsakfj djbfsdj sdhjfbsdjkfbs sdhjfbsdsn j h hcjh bhj  h  h db jh j </p>

</section>
<section>
    <img src="Images/photo-icon.png"><p>blashasakdsakjfdhsakfj djbfsdj sdhjfbsdjkfbs sdhjfbsdsn j h hcjh bhj  h  h db jh j </p>

</section>

</div>
</content>  

<footer>


</footer>

</body>

</html>






            @import url(http://fonts.googleapis.com/css?family=Lato|Tinos|Quattrocento+Sans|Text+Me+One);
            
            body{
                margin:0 auto;
            }
            header{
                width: 980px;
                margin:0 auto;
                position:relative;
                }
                
            nav{
                width:920px;
                text-align:right;
                position:relative;  
                top:-170px;
                z-index:10;
                margin:0 auto;
                
                
            }
            nav ul li{
                display:inline;
                margin:0 auto;
                padding:30px;
                font-size:20px;
                
                
            }
            
            
            #container{
                margin:0 auto;
                width:980px;
                position:relative;
                top:-130px;
                z-index:-1;
            
            }
            
            content{
                width:980px;
                margin:0 auto;
                background-color:black;
                overflow:hidden;
            }
            aside{
                width:750px;
                height:75px;
                position:relative;  
                top:-150px;
                float:right;
                background-color:#eba600;
                padding:5px;
                
            }
            
            section{
                width:200px;
                padding:55px;
                float:left;
                text-align:left;
            }
            
            footer{
                background-color:#241e20;
                width:980px;
                height:250px;
                overflow:hidden;
                margin:0 auto;
            }
            
            .ribbon:after, .ribbon:before {
                margin-top:0.5em;
                content: "";
                float:right;
                border:1.5em solid #fff;
                opacity:0.7;
                
            }
            
            .ribbon:before {
                border-right-color:transparent;
            }
            
            .ribbon:after {
                border-left-color:transparent;
            }
            
            .ribbon a:link, .ribbon a:visited { 
                color:#000;
                text-decoration:none;
                float:right;
                height:3.5em;
                overflow:hidden;
                
            }
            
            .ribbon span {
                background:#fff;
                opacity:0.7;
                display:inline-block;
                line-height:3em;
                padding:0 1em;
                margin-top:0.5em;
                position:relative;
                margin-right:1.0em
                
            
                -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
                -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
                -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
                -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
                transition: background-color 0.2s, margin-top 0.2s;
            }
            
            .ribbon a:hover span {
                background:#FFD204;
                margin-top:0;
                
            }
            
            .ribbon span:before {
                content: "";
                position:absolute;
                top:3em;
                left:0;
                border-right:0.5em solid #9B8651;
                border-bottom:0.5em solid #fff;
                margin-right:1.0em;
                
            }
            
            .ribbon span:after {
                content: "";
                position:absolute;
                top:3em;
                right:0;
                border-left:0.5em solid #9B8651;
                border-bottom:0.5em solid #fff;
                
            }

最佳答案

Demo Fiddle

你需要将你的 header 移动到你的 body 标签中，另外你的 CSS 应该放在你的 中的 style 标签中head 或者，理想情况下，链接到外部样式表。

然后您还需要从 #container 中删除 z-index:1，此时它正在“覆盖”您的内容，呈现在它下面的任何内容(例如选择框)不可点击。

关于html - <option> 是不可点击的，但它在 <aside> 之外工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23077704/

26 4 0
文章推荐： iOS App's file associations ("open with..")/CFBundleDocumentTypes 问题
文章推荐： jquery - 在不同屏幕上调整背景图像高度
文章推荐： html - 具有固定侧边栏和流动内容的简单两列布局
文章推荐： CSS:数字宽度是 em 还是 ex？
行者123
个人简介

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

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