Javascript css标题相关问题
在平板电脑或手机上查看时,黑色导航栏背景的问题大约是页面宽度的一半。在桌面上工作正常,否则Javascript css标题相关问题,javascript,html,css,Javascript,Html,Css,在平板电脑或手机上查看时,黑色导航栏背景的问题大约是页面宽度的一半。在桌面上工作正常,否则 <header> <div class="wrapper"> <!-- LOGO --> <a href="http://www.logicweb.com" title="LogicWeb" class="logo"><img src="/assets/img/logo.png" alt="LogicWeb" style="borde
<header>
<div class="wrapper">
<!-- LOGO -->
<a href="http://www.logicweb.com" title="LogicWeb" class="logo"><img src="/assets/img/logo.png" alt="LogicWeb" style="border:0" /></a>
<!-- PARTNERS -->
<a href="https://www.logicweb.com/affiliate" class="btn partners">AFFILIATES</a>
<!-- CLIENT LOGIN -->
<a href="https://www.logicweb.com/billing/clientarea.php" class="btn client-login">CLIENT LOGIN</a>
<!-- LIVE CHAT -->
<a href="javascript:void(0);" onclick="olark('api.box.expand')" class="btn live-chat">SALES CHAT</a>
<!-- PHONE NUMBER -->
<a href="tel:18775644293" class="btn phone-header">1.877.LOGICWEB</a>
</div>
<div class="clear-both"></div>
<nav>
<div class="wrapper">
<!-- TOP NAV -->
<ul>
<li<?php
if($homePage == 1) {
echo ' class="is-on"';
}
?>><a href="/"><span>HOME</span></a></li>
<li<?php
if(stristr($_SERVER["PHP_SELF"], "web-hosting")) {
echo ' class="is-on"';
}
?>><a href="/web-hosting/"><span>WEB HOSTING</span></a></li>
<li<?php
if(stristr($_SERVER["PHP_SELF"], "resellers")) {
echo ' class="is-on"';
}
?>><a href="/resellers/"><span>RESELLERS</span></a></li>
<li<?php
if(stristr($_SERVER["PHP_SELF"], "virtual-private-servers")) {
echo ' class="is-on"';
}
?>><a href="/virtual-private-servers/"><span>VPS</span></a></li>
<li<?php
if(stristr($_SERVER["PHP_SELF"], "dedicated-servers")) {
echo ' class="is-on"';
}
?>><a href="/dedicated-servers/"><span>DEDICATED SERVERS</span></a></li>
<li<?php
if(stristr($_SERVER["PHP_SELF"], "cloud-hosting")) {
echo ' class="is-on"';
}
?>><a href="/cloud-hosting/"><span>CLOUD HOSTING</span></a></li>
<li<?php
if(stristr($_SERVER["PHP_SELF"], "other-services")) {
echo ' class="is-on"';
}
?>>
<a href="/other-services/email-marketing.php"><span>OTHER SERVICES</span></a>
<div>
<?php include($_SERVER["DOCUMENT_ROOT"].'/other-services/inc/other-sub-nav.php');?>
</div>
<li<?php
if(stristr($_SERVER["PHP_SELF"], "")) {
echo ' class="is-on"';
}
?>><a href="/other-services/which-web-host.php"><span style="margin-left: 405px">You want IT. We got IT.</a><span style="font-size:8px; margin-top:13px; color:#B9B9B9; margin-left:-8px; float:right">SM</span></span></li>
</ul>
</div>
<div class="clear-both"></div>
</nav>
</header>
在您的
中有一个
只是一个快速的预感,现在无法测试:您是否将
标题
或导航
上的宽度设置为100%
?或者,如果您使用minwidth
,则与您使用的minwidth
相同?如果有帮助,我添加了css代码部分。谢谢,谢谢。我尝试了一些变化,但没有成功。我将div包装从服务器上卸下。然后我尝试将style=“margin:auto”添加到。我还试着把它添加到菜单中,但没有一个奏效,因为它们都会导致菜单左对齐。只是希望其他人能在这方面提供帮助。非常感谢。
body { background:#F0F0F0; font-family:Helvetica Neue, Helvetica, Arial, sans-serif; color:#535353; }
.wrapper { max-width:1300px; min-width:960px; margin:0 auto; padding:0 40px; }
.clear-both { clear:both; }
header { background:#fff; padding:15px 0 0 0; }
.logo img { float:left; width:230px; height:63px; }
header nav { background:#464646; margin-top:15px; font-size:12px; font-weight:bold; }
.phone { float:right; font-size:22px; font-weight:200; color:#464646; text-shadow:1px 1px 0 rgba(255, 255, 255, 1); padding:0; margin: 3px 10px 0 0 }
.phone a { text-decoration:none; color:#464646; }
.phone a:hover,
.phone a:active { color:#F27500; }
/* TOP NAV */
header nav ul { }
header nav ul li { float:left; list-style-type:none; position:relative; z-index:99999; }
header nav ul li > a { float:left; color:#B9B9B9; text-decoration:none; padding:15px 0; }
header nav ul li > a span { float:left; padding:5px 10px;
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;
}
.wrapper {
margin: 0 auto;
max-width: 1300px;
min-width: 960px; /* **bad start for a responsive design** */
padding: 0 40px;
}