我有以下代码，它在 firefox 中运行良好，但是当我想从移动设备上查看它时，它会切断我的一些 div 标签的末尾。他们根本没有出现。我错过了什么吗？请参阅以下内容:
<div class="banner-bg">
<video autoplay="autoplay" muted="muted" poster="wall_icons/my.jpg" width="100%" loop>
<source src="srix.mp4" type="video/mp4" type="video/mp4">
</video>
<div class="banner">
<div class="header">
<div class="logo wow fadeInRight" data-wow-delay="0.5s">
<a href="index.html"><img src="images/logo2.png" alt=""/></a>
</div>
<div class="top-menu">
<span class="menu"></span>
<ul class="cl-effect-1">
<li><a class="scroll" href="#home">Main</a></li>
<li><a class="scroll" href="#brief">Text1</a></li>
<li><a class="scroll" href="#features">Text2</a></li>
<li><a class="scroll" href="#screenshots">Text3</a></li>
<li><a class="scroll" href="#testimonial">Text4</a></li>
<li><a class="scroll" href="#contact">Text5</a></li>
</ul>
</div>
<div class="clearfix"></div>
<!-- script-for-menu -->
<script>
$("span.menu").click(function () {
$("ul.cl-effect-1").slideToggle(300, function () {
// Animation complete.
});
});
</script>
<!-- script-for-menu -->
</div>
<div class="banner-text wow fadeInUp" data-wow-delay="0.5s">
<h1>Welcome</h1>
</div>
<div class="booking-form">
<!---strat-date-piker---->
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker,#datepicker1").datepicker();
});
</script>
<!---/End-date-piker---->
<link type="text/css" rel="stylesheet" href="css/JFGrid.css"/>
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css"/>
<script type="text/javascript" src="js/JFCore.js"></script>
<script type="text/javascript" src="js/JFForms.js"></script>
<!-- Set here the key for your domain in order to hide the watermark on the web server -->
<script type="text/javascript">
(function () {
JC.init({
domainKey: ''
});
})();
</script>
<div>
<div>
<div class="booking_room">
<div class="reservation">
<ul>
<li class="span1_of_1 right">
<h5>Form</h5>
<div class="book_date">
<form>
<input type="text" placeholder="City" required="">
</form>
</div>
</li>
<li class="span1_of_1 right">
<h5>To</h5>
<div class="book_date">
<form>
<input type="text" placeholder="ToCity" required="">
</form>
</div>
</li>
<li class="span1_of_1 right">
<h5>Enter</h5>
<div class="book_date">
<form>
<input class="date" id="datepicker" type="text" value="2/04/2015" onfocus="this.value = '';"
onblur="if (this.value == '') {this.value = '2/04/2015';}" required=>
</form>
</div>
</li>
<li class="span1_of_1 right">
<h5>Text1 </h5>
<div class="book_date">
<form>
<input class="date" id="datepicker1" type="text" value="22/08/2015" onfocus="this.value = '';"
onblur="if (this.value == '') {this.value = '22/08/2015';}" required=>
</form>
</div>
</li>
<li class="span1_of_1">
<h5>Class</h5>
<!----------start section_room----------->
<div class="section_room">
<select id="country" onchange="change_country(this.value)" class="frm-field required">
<option value="null">Text1</option>
<option value="null">Text1</option>
<option value="AX">Text1</option>
<option value="AX">Text1</option>
</select>
</div>
</li>
<li class="span1_of_3">
<div class="date_btn">
<form>
<input type="submit" value="Text1"/>
</form>
</div>
</li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!---->
</div>
<div class="clearfix"></div>
<div class="online-form">
<a class="play-icon popup-with-zoom-anim" href="#small-dialog2">Reserve</a>
</div>
<div id="small-dialog2" class="mfp-hide">
<div class="signup">
<form>
<input type="text" class="email" placeholder="Type Depature City" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"/>
<input type="text" class="email" placeholder="Type Destination City" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"/>
<input type="text" class="email" placeholder="2/04/2015" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"/>
<input type="text" class="email" placeholder="22/08/2015" required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"/>
<input type="submit" value="Book Now"/>
</form>
</div>
<div class="clearfix"></div>
</div>
<script>
$(document).ready(function () {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
</div>
</div>
这是我的相关CSS。如果需要显示我的 css 的其他部分，请告诉我:
.banner-bg {
position: relative;
}
.banner {
position: absolute;
top: 0;
width: 80%;
margin: 0 auto;
right: 10%;
}
最佳答案
正如您已经写过的 <div class="online_reservation">根本没有显示。因此，如果上述规则包含在 @media 查询样式规则中，则必须检查样式表文件。
示例:
@media only screen and (max-width: 500px) {
.online_reservation {
display:none;
}
或者至少您必须提供指向您的 CSS 文件的链接，以便我查看并为您提供更准确的答案。
关于javascript - 为什么我的 div 标签没有正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48416172/