DIV不能使用不同的分辨率

这可能之前已经回答，我的搜索没有让我得到任何答案，所以我提前道歉，如果已经有线程可能会帮助。DIV不能使用不同的分辨率

我意识到什么网页看起来靠不住的，它看起来从我自己的电脑要好得多。当谈到不同的解决方案时，我真的只是在导航栏中遇到问题而没有集中在幻灯片上。

HTML：

</div> 
<div id="schedule"> 
    <p>&nbsp;</p> 
</div> 
<div id="wrap"> 
    <ul class="navbar"> 
     <li><a href="PDFs/2014/LHS Course Catalog 2013-2014.pdf">Courses</a> 
     </li> 
     <li><a href="Faculty.html">Faculty</a> 
     </li> 
     <li><a href="Programs.html">Programs and Athletics</a> 
     </li> 
     <li><a href="">Information &#9661;</a> 

      <ul> 
       <li><a target="_blank" href="https://parentlink.ccsd.net/html/ContentBase/Content/Home/Login">ParentLink</a> 
       </li> 
       <li><a target="_blank" href="https://twitter.com/">Twitter</a> 
       </li> 
       <li><a target="_blank" href="https://www.facebook.com/">Facebook</a> 
       </li> 
       <li><a href="Handouts.html">Important Handouts</a> 

      </ul> 
      </li> 
    </ul> 
</div> 
<br /> 
<div id="slide_background"> 
    <!-- Start WOWSlider.com BODY section id=wowslider-container4 --> 
    <div id="wowslider-container4"> 
     <div class="ws_images"> 
      <ul> 
       <li> 
        <img src="#" /> 
       </li> 
       <li> 
        <img src="#" /> 
       </li> 
       <li> 
        <img src="#" /> 
       </li> 
       <li> 
        <img src="#" /> 
       </li> 
       <li> 
        <img src="#" /> 
       </li> 
      </ul> 
     </div> 
     <div class="ws_bullets"> 


      </div> 
     </div> 
     <div class="ws_shadow"></div> 
    </div> 
    <script type="text/javascript" src="engine4//wowslider.js"></script> 
    <script type="text/javascript" src="engine4//script.js"></script> 
    <!-- End WOWSlider.com BODY section --> 
</div>

CSS：

/* CSS Document */ 
body { 
background-image:url(images/images/banner_repeat_01.jpg); 
width:auto; 
height:auto; 
background-repeat:repeat-x; 
} 
footer { 
background-color:#c3c3c3; 
background-repeat:repeat-x; 
background-position:bottom; 
width:100%; 
left:0; 
right:0; 
position:absolute; 
} 
#banner { 
width:auto; 
height:auto; 
margin-left:auto; 
margin-right:auto; 
text-align:center; 
color:white; 
text-shadow: 2px 2px 5px #000; 
font-family:"Times New Roman", Times, serif; 
} 
#schedule { 
color:white; 
margin-left:auto; 
margin-right:auto; 
text-align:center; 
margin-top:2.9em; 
} 
#slide_background { 
background-color:#c3c3c3; 
margin-left:auto; 
margin-right:auto; 
width:100%; 
position:absolute; 
left:0; 
right:0; 
} 
#slides { 
background-color:#000; 
margin-left:auto; 
margin-right:auto; 
text-align:center; 
height:13em; 
width:70%; 
margin-top:-1em; 
color:white; 
} 
#frontpage { 
margin-left:auto; 
margin-right:auto; 
width:100%; 
color:#333; 
margin-top:23em; 
} 
#banner hr { 
width:15em; 
margin-top:-1.8em 
} 
#frontpage table th { 
color:#333; 
border-collapse:collapse; 
font-size:2em; 
text-decoration:underline; 
font-variant:small-caps; 
} 
#frontpage table td { 
color:#161616; 
border-collapse:collapse; 
font-size:1.3em; 
} 
h1 { 
font-size:2.8em; 
margin-top:-.1em; 
} 
h3 { 
font-variant:small-caps; 
margin-top:-.2em; 
letter-spacing:4px; 
} 
a:link { 
text-decoration: none; 
color:black; 
} 
a:visited { 
text-decoration:none; 
font-weight:bold; 
color:black; 
} 
a:active { 
text-decoration:underline; 
color: #00F; 
} 
table a:hover { 
text-decoration:underline; 
font-weight:bold; 
color:#33F; 
} 
a h3 { 
color: #FFF; 
text-decoration: none; 
} 
a h1 { 
color: #FFF; 
text-decoration: none; 
} 
table { 
font-family:"Times New Roman", Times, serif; 
font-size:1em; 
margin-left:auto; 
margin-right:auto; 
letter-spacing:2px; 
margin-top:-.5em; 
} 
td:nth-child(1) { 
border-right:solid thin; 
} 
td:nth-child(2) { 
border-right:solid thin; 
} 
td:nth-child(3) { 
border-right:solid thin; 
} 
#frontpage td:nth-child(3) { 
border-right:none; 
} 
.schedule_day { 
font-weight:bold; 
font-size:1.3em; 
text-decoration:underline; 
color:black; 
font-variant:small-caps; 
} 
#banner a h1 { 
text-decoration: none; 
} 

#wowslider-container4 { 
zoom: 1; 
position: relative; 
max-width:960px; 
margin:0px auto 0px; 
z-index:90; 
border:none; 
text-align:left; 
/* reset align=center */ 
font-size: 10px; 
} 
* html #wowslider-container4 { 
width:960px 
} 
#wowslider-container4 .ws_images ul { 
position:relative; 
width: 10000%; 
height:auto; 
left:0; 
list-style:none; 
margin:0; 
padding:0; 
border-spacing:0; 
overflow: visible; 
/*table-layout:fixed;*/ 
} 
#wowslider-container4 .ws_images ul li { 
width:1%; 
line-height:0; 
/*opera*/ 
float:left; 
font-size:0; 
padding:0 0 0 0 !important; 
margin:0 0 0 0 !important; 
} 
#wowslider-container4 .ws_images { 
position: relative; 
left:0; 
top:0; 
width:100%; 
height:100%; 
overflow:hidden; 
} 
#wowslider-container4 .ws_images a { 
width:100%; 
display:block; 
color:transparent; 
} 
#wowslider-container4 img { 
max-width: none !important; 
} 
#wowslider-container4 .ws_images img { 
width:100%; 
border:none 0; 
max-width: none; 
padding:0; 
margin:0; 
} 
#wowslider-container4 a { 
text-decoration: none; 
outline: none; 
border: none; 
} 
#wowslider-container4 .ws_bullets { 
font-size: 0px; 
float: left; 
position:absolute; 
z-index:70; 
} 
#wowslider-container4 .ws_bullets div { 
position:relative; 
float:left; 
} 
#wowslider-container4 .wsl { 
display:none; 
} 
#wowslider-container4 sound, #wowslider-container4 object { 
position:absolute; 
} 
#wowslider-container4 .ws_bullets { 
padding: 9px; 
} 
#wowslider-container4 .ws_bullets a { 
width:11px; 
height:11px; 
background: url(./bullet.png) left top; 
float: left; 
text-indent: -4000px; 
position:relative; 
margin-left:5px; 
color:transparent; 
} 
#wowslider-container4 .ws_bullets a:hover { 
background-position: 0 50%; 
} 
#wowslider-container4 .ws_bullets a.ws_selbull { 
background-position: 0 100%; 
} 
#wowslider-container4 a.ws_next, #wowslider-container4 a.ws_prev { 
position:absolute; 
display:block; 
top:50%; 
margin-top:-2em; 
z-index:60; 
height: 4.5em; 
width: 4.5em; 
background-image: url(./arrows.png); 
opacity: 0.8; 
background-size: 200%; 
} 
#wowslider-container4 a.ws_next { 
background-position: 100% 0; 
right:2.1em; 
} 
#wowslider-container4 a.ws_prev { 
left:2.1em; 
background-position: 0 0; 
} 
#wowslider-container4 a.ws_next:hover { 
opacity: 1; 
} 
#wowslider-container4 a.ws_prev:hover { 
opacity: 1; 
} 
/*playpause*/ 
#wowslider-container4 .ws_playpause { 
display:none; 
width: 4.5em; 
height: 4.5em; 
position: absolute; 
top: 50%; 
left: 50%; 
margin-left: -2em; 
margin-top: -2em; 
z-index: 59; 
background-size: 100%; 
} 
#wowslider-container4:hover .ws_playpause { 
display:block; 
} 
#wowslider-container4 .ws_pause { 
background-image: url(./pause.png); 
} 
#wowslider-container4 .ws_play { 
background-image: url(./play.png); 
} 
#wowslider-container4 .ws_pause:hover, #wowslider-container1 .ws_play:hover { 
background-position: 100% 100% !important; 
} 
/* bottom center */ 
#wowslider-container4 .ws_bullets { 
bottom: -26px; 
left:862px; 
} 
#wowslider-container4 .ws_bullets div { 
left:-50%; 
} 
#wowslider-container4 .ws-title { 
position:absolute; 
display:block; 
bottom: 1.7em; 
left: 0; 
margin: 0.9em; 
margin-left: 0; 
margin-right: 0.9em; 
padding:0.8em; 
background:#FFFFFF; 
color:#5D5D5D; 
z-index: 50; 
font-family:'Open Sans', Arial, Helvetica, sans-serif; 
border-radius:0.5em; 
-moz-border-radius:0 1em 1em 0; 
border-radius:0 1em 1em 0; 
opacity:0.8; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); 
-moz-box-shadow: 0 0 0.2em #5D5D5D; 
box-shadow: 0 0 0.2em #5D5D5D; 
} 
#wowslider-container4 .ws-title div { 
padding-top:0.25em; 
font-size: 1.4em; 
} 
#wowslider-container4 .ws-title span { 
font-size: 1.8em; 
} 
#wowslider-container4 .ws_images ul { 
animation: wsBasic 20s infinite; 
-moz-animation: wsBasic 20s infinite; 
-webkit-animation: wsBasic 20s infinite; 
} 
@keyframes wsBasic { 
0% { 
    left:-0% 
} 
10% { 
    left:-0% 
} 
20% { 
    left:-100% 
} 
30% { 
    left:-100% 
} 
40% { 
    left:-200% 
} 
50% { 
    left:-200% 
} 
60% { 
    left:-300% 
} 
70% { 
    left:-300% 
} 
80% { 
    left:-400% 
} 
90% { 
    left:-400% 
} 
} 
@-moz-keyframes wsBasic { 
0% { 
    left:-0% 
} 
10% { 
    left:-0% 
} 
20% { 
    left:-100% 
} 
30% { 
    left:-100% 
} 
40% { 
    left:-200% 
} 
50% { 
    left:-200% 
} 
60% { 
    left:-300% 
} 
70% { 
    left:-300% 
} 
80% { 
    left:-400% 
} 
90% { 
    left:-400% 
} 
} 
@-webkit-keyframes wsBasic { 
0% { 
    left:-0% 
} 
10% { 
    left:-0% 
} 
20% { 
    left:-100% 
} 
30% { 
    left:-100% 
} 
40% { 
    left:-200% 
} 
50% { 
    left:-200% 
} 
60% { 
    left:-300% 
} 
70% { 
    left:-300% 
} 
80% { 
    left:-400% 
} 
90% { 
    left:-400% 
} 
} 
#wowslider-container4 .ws_images img { 
border-radius: 4px; 
-moz-border-radius:4px; 
-webkit-border-radius:4px; 
} 
#wowslider-container4 .ws_effect img { 
border-radius: 4px; 
-moz-border-radius:4px; 
-webkit-border-radius:4px; 
} 

#wrap { 
width: 100%; 
/* Spans the width of the page */ 
height: 3.8em; 
margin: 0; 
/* Ensures there is no space between sides of the screen and the menu */ 
z-index: 99; 
/* Makes sure that your menu remains on top of other page elements */ 
position: absolute; 
background-color:#FFF; 
left:-3px; 
right:0; 
top: 153px; 
margin-left:auto; 
margin-right:auto; 
} 
body { 
width:100%; 
height:100%; 
} 
    .navbar { 
height: .5em; 
padding: 0; 
margin-left: 40em; 
margin-right: auto; 
position: absolute; 
/* Ensures that the menu doesn't affect other elements */ 
width: auto; 
left: 0 top: 0px; 
min-width:800px; 
} 
.navbar li { 
height: 1.5em; 
; 
width: 10em; 
/* Each menu item is 150px wide */ 
float:left; 
text-align: center; 
/* All text is placed in the center of the box */ 
list-style: none; 
/* Removes the default styling (bullets) for the list */ 
font:"Times New Roman", Times, serif; 
font-size:1em; 
padding: 0; 
margin:0; 
border-left:thin solid #000; 
border-right:thin solid #000; 
} 
.navbar a { 
padding: 0; 
/* Adds a padding on the top and bottom so the text appears centered vertically */ 
text-decoration: none; 
/* Removes the default hyperlink styling. */ 
color: #000; 
/* Text color is white */ 
display: block; 
} 
.navbar li ul { 
display: none; 
/* Hides the drop-down menu */ 
height: auto; 
margin: 0; 
/* Aligns drop-down box underneath the menu item */ 
} 
.navbar li:hover ul { 
display: block; 
/* Displays the drop-down box when the menu item is hovered over */ 
border: none; 
padding: .7em; 
} 
li:nth-child(1) { 
border-right:solid thin; 
} 
li:nth-child(2) { 
border-right:solid thin; 
} 
li:nth-child(3) { 
border-right:solid thin; 
} 
li:nth-child(4) { 
border-right:solid thin; 
} 
.navbar li ul li { 
border:none; 
background-color:#CCC; 
border:thin solid #000; 
padding:5px; 
width:130px; 
} 
.navbar li ul li a:hover { 
background-color: #CCC; 
}

谢谢！

来源

2014-03-12 Harin

没有媒体查询？ –

添加到您的#wrap ID
```
#wrap { text-align: center; } 
```
并删除.navbar代码。粘贴此代替
```
.navbar { display: inline-block; } 
```

fiddle demo

来源

2014-03-12 16:51:52 Fury

嘿艾萨克，谢谢你的帮助！这工作以前，但我已经在我的导航栏上添加更多链接，现在我的导航栏中断并创建两行。我的代码与上面的99％相同，只是有几个导航链接。你认为你可以帮忙吗？ – Harin

这是正确的。当屏幕尺寸为手机尺寸或平板电脑尺寸时，您可以使用下拉菜单。 – Fury

-1

海兰Harin

如果我理解你的权利，这是所有关于中心导航？然后试试这些：

.navbar { 
    margin: 10px auto; 
    width: 800px; 
}

设置固定与您的导航栏UL。然后设置一个边距：0自动。这意味着顶部和底部的0边距以及左侧和右侧的自动边距=它将居中。这将无法正常工作，如果屏幕宽度小于800像素smaler;）

来源

2014-03-12 16:20:05 roman

这不起作用。 – Fury

是的它只是添加我的CSS属性在你的小提琴结束并重试它。预览窗口的宽度必须高于800像素！否则导航栏里的项目将会分成多行 – roman

无效。请注意，这是敏感布局 – Fury

DIV不能使用不同的分辨率

回答

相关问题