gpt4 book ai didi

HTML/CSS 为什么缩放宽度时按钮一直消失?

转载 作者:太空宇宙 更新时间:2023-11-04 09:16:25 25 4
gpt4 key购买 nike

我试图为学校的一个元素制作一个响应式网站,但是当我缩放网站的宽度时,这个按钮总是消失。

美景:

enter image description here

按钮在平板电脑和移动设备 View 中消失:

enter image description here

我该如何解决这个问题?

代码:

html * {
padding:0;
margin:0;
}
@font-face {
font-family: ITC Franklin;
src: url("ITC_Franklin_Book.otf");
}
h1, p, h3 {
font-family: ITC Franklin;
}
#results img{
margin-left: 3%;
margin-top: 6%;
}
#wrapper{
width: 100%;
height: 100%;
}
header{
z-index: 1;
}
header h1{
margin-top: 1.5%;
margin-left: 25.5%;
}
.knopje {
width: 50%;
height: 10%;
border: medium solid grey;
margin-left: 25%;
}

/* MENU */
#nav li {
background-color: white;
height: 50%;
line-height: 40px;
list-style: outside none none;
margin-left: 26%;
padding-left: 35px;
padding-right: 35px;
position: relative;
}

/* body */
body {
line-height: 1.5em;
max-width:100%;
background-image:url("image/background.jpg");
background-size: 100%;
}

/* Header */
header {
background: none repeat scroll 0 0 white;
border-radius: 15px;
display: inline-block;
float: left;
height: 50px;
margin: 2.5% 4.5% 3.5% 10%;
width: 82.5%;
}
header img {
display: inline;
margin-left: -3%;
margin-top: -2%;
max-width: 100%;
position: absolute;
width: 9%;
z-index: 1;
}

/* Actions screen LINKS */
div #linkerdiv{
background: none repeat scroll 0 0 white;
border-radius: 30px;
display: inline-block;
float: left;
height: 500px;
margin-left: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 40%;
}
input #poll{
margin-left: 5%;
}
#linkerdiv img{
width:45%;
height:40%;
margin-left: 3%;
margin-top: 5%;
max-width: 100%;
z-index: 1;
}
#linkerdiv p{
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
width: 90%;
font-size: 11pt;
}
#linkerdiv li{
font-family: ITC Franklin;
margin-left: 5%;
list-style: none;
}
h3 {
margin-left: 5%;
}
textarea{
border-radius: 30px;
max-width: 90%;
width: 90%;
margin-left: 5%;
margin-top: 1%;
}

/* Presentatoren div rechts */
div #rechterdiv{
background: none repeat scroll 0 0 white;
border-radius: 30px;
font-family: ITC Franklin;
display: inline-block;
float: right;
height: 500px;
margin-right: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 40%;
}
#rechterdiv h2 {
margin-left: 5%;
margin-top: 3%;
margin-bottom: 1%;
width: 90%;
font-size: 13pt;
}
#rechterdiv p{
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
width: 90%;
font-size: 11pt;
}

/*BREAKPOINT1*/

/*BREAKPOINT 2*/
@media screen and (max-width:40em) {
html, body {
width: 100%;
overflow-x: hidden;
}
header h1{
font-size: 1.5em;
}
div #linkerdiv {
background: none repeat scroll 0 0 white;
border-radius: 30px;
height: 500px;
margin-left: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 87%;
}
div #rechterdiv {
background: none repeat scroll 0 0 white;
border-radius: 30px;
float: right;
height: 500px;
margin-bottom: 3.5%;
margin-right: 5.5%;
margin-top: 0.5%;
width: 87%;
}
#w3-display-container mySlides {
z-index: 5;
}
#w3-btn-floating w3-hover-dark-grey w3-display-right {
z-index: 10;
}
#w3-btn-floating w3-hover-dark-grey w3-display-left {
z-index: 10;
}
header {
background: none repeat scroll 0 0 white;
border-radius: 15px;
display: inline-block;
float: left;
height: 75px;
margin: 2.5% 4.5% 3.5% 10%;
width: 82.5%;
}
header img {
display: inline;
margin-left: -7%;
margin-top: -2%;
max-width: 100%;
position: absolute;
width: 25%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>3 Op Reis Second Screen</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<meta name="description" content="Second screen" />
<meta name="author" content="Berkay Bayir" />
<meta name="keywords" content="3opreis second screen" />
<link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="js/script.js" type="text/javascript" async defer></script>
</head>
<body>
<div id="wrapper" data-role="page" class="ui-content">
<header>
<img src="image/logotje.png" alt="logo"/>
<nav id="header" role="header text">
<ul>
<h1>3 Op Reis Second Screen App</h1>
</ul>
</nav>
</header>
<div id="linkerdiv">
<img src="image/3.png" alt="logo"/>
<img src="image/4.png" alt="logo"/>
<p>
In de aflevering van 15 januari 2017, die zometeen zal beginnen, bezoeken de presentatoren de landen Egypte, Italië en Canada. Ze gaan langs de steden Cairo, San Marino en Toronto.

Hieronder kun je stemmen wat voor jou het interessant lijkt.
De resultaten zullen aan het begin van de aflevering op tv getoond worden.

</p>
<ul>
<form id="formulier">
<h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
<li><input type="radio" id="poll" name="stemmen" value="1"> Egypte</li>
<li><input type="radio" id="poll" name="stemmen" value="2"> Italië</li>
<li><input type="radio" id="poll" name="stemmen" value="3"> Canada</li>
<input type="button" class="knopje" value="Stem!" onclick="thankYou()">
</form>
</ul>
</div>
<div id="rechterdiv">
<div class="w3-container">
<h2>Zondag 15 januari 2017 om 19.50 uur</h2>
<p>Bekijk wie welk land bezoekt!</p>
</div>
<div class="w3-content w3-display-container">
<a class="w3-btn-floating w3-hover-dark-grey w3-display-left" onclick="plusDivs(-1)">&#10094;</a>
<a class="w3-btn-floating w3-hover-dark-grey w3-display-right" onclick="plusDivs(1)">&#10095;</a>
<div class="w3-display-container mySlides">
<img src="image/1.png" style="width:100%">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Geraldine in San Marino, Italië
</div>
</div>
<div class="w3-display-container mySlides">
<img src="image/2.png" style="width:100%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
Dennis in Cairo, Egypte
</div>
</div>
</div>
</body>
</html>

最佳答案

导致您出现问题的原因是您的 div #linkerdiv 规则将高度定义为 500px,因此当屏幕较窄时,其内容会变得更高,一切都溢出来了!

这里有两种选择:

  1. 通过将其设置为新值来更改所有屏幕宽度的高度
  2. 更改您的 media query仅在窄屏幕上更改高度。

我更新了您的代码以使用媒体查询作为示例:

html * {
padding: 0;
margin: 0;
}
@font-face {
font-family: ITC Franklin;
src: url("ITC_Franklin_Book.otf");
}
h1,
p,
h3 {
font-family: ITC Franklin;
}
#results img {
margin-left: 3%;
margin-top: 6%;
}
#wrapper {
width: 100%;
height: 100%;
}
header {
z-index: 1;
}
header h1 {
margin-top: 1.5%;
margin-left: 25.5%;
}
.knopje {
width: 50%;
height: 10%;
border: medium solid grey;
margin-left: 25%;
}
/* MENU */

#nav li {
background-color: white;
height: 50%;
line-height: 40px;
list-style: outside none none;
margin-left: 26%;
padding-left: 35px;
padding-right: 35px;
position: relative;
}
/* body */

body {
line-height: 1.5em;
max-width: 100%;
background-image: url("image/background.jpg");
background-size: 100%;
}
/* Header */

header {
background: none repeat scroll 0 0 white;
border-radius: 15px;
display: inline-block;
float: left;
height: 50px;
margin: 2.5% 4.5% 3.5% 10%;
width: 82.5%;
}
header img {
display: inline;
margin-left: -3%;
margin-top: -2%;
max-width: 100%;
position: absolute;
width: 9%;
z-index: 1;
}
/* Actions screen LINKS */

div #linkerdiv {
background: none repeat scroll 0 0 white;
border-radius: 30px;
display: inline-block;
float: left;
height: 500px;
margin-left: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 40%;
}
input #poll {
margin-left: 5%;
}
#linkerdiv img {
width: 45%;
height: 40%;
margin-left: 3%;
margin-top: 5%;
max-width: 100%;
z-index: 1;
}
#linkerdiv p {
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
width: 90%;
font-size: 11pt;
}
#linkerdiv li {
font-family: ITC Franklin;
margin-left: 5%;
list-style: none;
}
h3 {
margin-left: 5%;
}
textarea {
border-radius: 30px;
max-width: 90%;
width: 90%;
margin-left: 5%;
margin-top: 1%;
}
/* Presentatoren div rechts */

div #rechterdiv {
background: none repeat scroll 0 0 white;
border-radius: 30px;
font-family: ITC Franklin;
display: inline-block;
float: right;
height: 500px;
margin-right: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 40%;
}
#rechterdiv h2 {
margin-left: 5%;
margin-top: 3%;
margin-bottom: 1%;
width: 90%;
font-size: 13pt;
}
#rechterdiv p {
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
width: 90%;
font-size: 11pt;
}
/*BREAKPOINT1*/

/*BREAKPOINT 2*/

@media screen and (max-width: 40em) {
html,
body {
width: 100%;
overflow-x: hidden;
}
header h1 {
font-size: 1.5em;
}
div #linkerdiv {
background: none repeat scroll 0 0 white;
border-radius: 30px;
height: 700px;
margin-left: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 87%;
}
div #rechterdiv {
background: none repeat scroll 0 0 white;
border-radius: 30px;
float: right;
height: 500px;
margin-bottom: 3.5%;
margin-right: 5.5%;
margin-top: 0.5%;
width: 87%;
}
#w3-display-container mySlides {
z-index: 5;
}
#w3-btn-floating w3-hover-dark-grey w3-display-right {
z-index: 10;
}
#w3-btn-floating w3-hover-dark-grey w3-display-left {
z-index: 10;
}
header {
background: none repeat scroll 0 0 white;
border-radius: 15px;
display: inline-block;
float: left;
height: 75px;
margin: 2.5% 4.5% 3.5% 10%;
width: 82.5%;
}
header img {
display: inline;
margin-left: -7%;
margin-top: -2%;
max-width: 100%;
position: absolute;
width: 25%;
}
}
<!DOCTYPE html>
<html>

<head>
<title>3 Op Reis Second Screen</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<meta name="description" content="Second screen" />
<meta name="author" content="Berkay Bayir" />
<meta name="keywords" content="3opreis second screen" />
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<script src="js/script.js" type="text/javascript" async defer></script>

</head>

<body>
<div id="wrapper" data-role="page" class="ui-content">

<header>
<img src="image/logotje.png" alt="logo" />
<nav id="header" role="header text">

<ul>

<h1>3 Op Reis Second Screen App</h1>
</ul>
</nav>
</header>

<div id="linkerdiv">
<img src="image/3.png" alt="logo" />
<img src="image/4.png" alt="logo" />

<p>
In de aflevering van 15 januari 2017, die zometeen zal beginnen, bezoeken de presentatoren de landen Egypte, Italië en Canada. Ze gaan langs de steden Cairo, San Marino en Toronto. Hieronder kun je stemmen wat voor jou het interessant lijkt. De resultaten
zullen aan het begin van de aflevering op tv getoond worden.

</p>
<ul>
<form id="formulier">
<h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
<li>
<input type="radio" id="poll" name="stemmen" value="1">Egypte</li>
<li>
<input type="radio" id="poll" name="stemmen" value="2">Italië</li>
<li>
<input type="radio" id="poll" name="stemmen" value="3">Canada</li>
<input type="button" class="knopje" value="Stem!" onclick="thankYou()">
</form>
</ul>
</div>


<div id="rechterdiv">
<div class="w3-container">
<h2>Zondag 15 januari 2017 om 19.50 uur</h2>
<p>Bekijk wie welk land bezoekt!</p>
</div>

<div class="w3-content w3-display-container">

<a class="w3-btn-floating w3-hover-dark-grey w3-display-left" onclick="plusDivs(-1)">&#10094;</a>
<a class="w3-btn-floating w3-hover-dark-grey w3-display-right" onclick="plusDivs(1)">&#10095;</a>

<div class="w3-display-container mySlides">
<img src="image/1.png" style="width:100%">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Geraldine in San Marino, Italië
</div>
</div>

<div class="w3-display-container mySlides">
<img src="image/2.png" style="width:100%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
Dennis in Cairo, Egypte
</div>
</div>
</div>
</div>
</div>
</body>

</html>

关于HTML/CSS 为什么缩放宽度时按钮一直消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41738025/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com