我正在制作一个 html 网页，我遇到了这个问题:我的页面标题比我的屏幕尺寸宽，导致出现水平滚动条。我已经检查了一些解决方案，但它们没有用。谁能知道为什么会这样？
这是我的标题代码:
<header>
<!--NAV BAR-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top elegant-color-dark">
<div class="container-fluid">
<!-- NAV BRAND-->
<a class="navbar-brand" href="index.html">
<img src="http://eprticher.mx/images/tich.gif" height="30" class="d-inline-block align-top mr-2" alt="">
TICHER | Seguridad Privada
</a>
<div class="navbar-nav navbar-right">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Inicio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Servicios</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropMenu">
<a class="dropdown-item" href="servicios_seguridad.html">Servicios Seguridad</a>
<a class="dropdown-item" href="tranp_ejecutiva.html">Transporte Ejecutivo</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="quienes_somos.html">¿Quienes Somos?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="porque_elegirnos.html">¿Porqué Elegirnos?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactanos.html">Contáctanos</a>
</li>
</ul>
</div>
</div>
</nav>
这是我的 CSS 代码:
body {
background-color: #ffffff;
padding-top: 60px;
}
header {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.sizeAdj img {
width: auto;
height: 500px;
max-height: 500px;
}
.img-resp {
width: 100%;
}
.img-resp-sm {
width: 50%;
}
.carousel-caption {
position: absolute;
bottom: 40%;
left: 15%;
z-index: 25;
/*background: rgb(68, 68, 68);*/
color: white;
}
.separator {
height: 1px;
border: none;
color: #bdbdbd;
background-color: #bdbdbd;
}
Header CSS 是我找到的解决方案，但它看起来不起作用...
以下是我如何将 header 添加到我使用它的另一个 HTML 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="shortcut icon" href="img/favicon.ico">
<title>TICHER | Estrategias de Protección</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<!--HEADER-->
<div id="header"></div>
<!--MAIN-->
<main class="mt-5 mb-5">
<div class="container">
<h2 class="mb-5 mt-5 font-weight-bold text-center">¿Quienes Somos?</h2>
<div class="row">
<div class="col-md-6 mr-5">
<p class="grey-text font-bold text-justify">
<strong>TICHER</strong> nace con una experiencia de mas de 30 años en las áreas de <strong>Administración de Personal y Seguridad</strong>.
El enfoque de la empresa es dar servicios que coadyuven al logro de los objetivos del cliente y atender a los diferentes sectores del mercado.
Para ello dentro de nuestra filosofía se encuentra privilegiar la atención y la respuesta oportuna, para cubrir las necesidades del cliente.
</p>
</div>
<div class="col-md">
<div class="view overlay hm-white-slight z-depth-1-half text-center">
<img class="img-fluid img-resp" src="img/SignificadoLetras.jpg" alt="">
<a href="#">
<div class="mask"></div>
</a>
</div>
</div>
</div>
</div>
</main>
<!--Footer-->
<div id="footer"></div>
</body>
<!-- SCRIPTS -->
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
</html>
最佳答案
添加下面的css，应该可以解决水平滚动条的问题
body .navbar-nav{
margin-right: 0px;
margin-left: 0px;
}
body .navbar-nav{
margin-right: 0px;
margin-left: 0px;
}
body {
background-color: #ffffff;
padding-top: 60px;
}
header {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.sizeAdj img {
width: auto;
height: 500px;
max-height: 500px;
}
.img-resp {
width: 100%;
}
.img-resp-sm {
width: 50%;
}
.carousel-caption {
position: absolute;
bottom: 40%;
left: 15%;
z-index: 25;
/*background: rgb(68, 68, 68);*/
color: white;
}
.separator {
height: 1px;
border: none;
color: #bdbdbd;
background-color: #bdbdbd;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top elegant-color-dark">
<div class="container-fluid">
<!-- NAV BRAND-->
<a class="navbar-brand" href="index.html">
<img src="http://eprticher.mx/images/tich.gif" height="30" class="d-inline-block align-top mr-2" alt="">
TICHER | Seguridad Privada
</a>
<div class="navbar-nav navbar-right">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Inicio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Servicios</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropMenu">
<a class="dropdown-item" href="servicios_seguridad.html">Servicios Seguridad</a>
<a class="dropdown-item" href="tranp_ejecutiva.html">Transporte Ejecutivo</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="quienes_somos.html">¿Quienes Somos?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="porque_elegirnos.html">¿Porqué Elegirnos?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactanos.html">Contáctanos</a>
</li>
</ul>
</div>
</div>
</nav>
</body>关于html - 标题尺寸比屏幕宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48015298/