2017-08-10 79 views
1

我正在使用以下HTML & CSS代碼摘錄。 「navmenu」項目在IE中跨越頁面的整個寬度,但在Chrome中保留右側的空間。完整的頁面可以在www.bobabend.com上查看。任何人都可以告訴我要更改什麼,以便在兩個瀏覽器中的「navmenu」項目都是全寬度的?HTML5&CSS3居中

.navmenu { 
 
    padding: 0; 
 
    display: block; 
 
    z-index: 2; 
 
    clear: none; 
 
    margin-top: -13px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.navmenu ul { 
 
    padding: 0; 
 
    background-color: #0000FF; 
 
} 
 

 
.navmenu li { 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    background-color: #006500; 
 
    float: left; 
 
    border: thick ridge #CC9900; 
 
} 
 

 
.navmenu ul li a { 
 
    text-align: center; 
 
    font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica; 
 
    text-decoration: none; 
 
    height: 45px; 
 
    width: 200px; 
 
    display: block; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px 1px #000; 
 
    font-size: medium; 
 
    vertical-align: middle; 
 
    line-height: 40px; 
 
} 
 

 
.navmenu ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    top: 32px; 
 
} 
 

 
.navmenu ul li:hover ul { 
 
    visibility: visible; 
 
} 
 

 
.navmenu li:hover { 
 
    background: #09F; 
 
    z-index: 1; 
 
    font-weight: bolder; 
 
} 
 

 
.navmenu ul li:hover ul li a:hover { 
 
    background: #CCC; 
 
    color: #000; 
 
} 
 

 
.navmenu a:hover { 
 
    color: #000; 
 
    font-weight: bolder; 
 
} 
 

 
.clearfloat { 
 
    clear: both; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrapper { 
 
    z-index: 1; 
 
    width: 1050px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}
<div class="wrapper"> 
 
    <div class="navmenu"> 
 
    <ul> 
 
     <li><a class="long bold" href="Electrical Equipment Reliability 8-12-2014 Sec.pdf" target="_blank">Electronics<br>Reliability Paper</a> 
 
     </li> 
 
     <!--end main LI--> 
 
    </ul> 
 
    <!--end main UL--> 
 
    </div> 
 
    <!--end navmenu--> 
 
    <div class="navmenu"> 
 
    <ul> 
 
     <li><a class="bold" href="A-Board Insurance Claim Analysis 1-4-2015 small.pdf" target="_blank">Case Report Example</a> 
 
     </li> 
 
     <!--end main LI--> 
 
    </ul> 
 
    <!--end main UL--> 
 
    </div> 
 
    <!--end navmenu--> 
 
    <div class="navmenu"> 
 
    <ul> 
 
     <li><a class="bold long" href="dui.pdf" target="_blank">Attorney<br>Commentaries</a></li> 
 
     </li> 
 
     <!--end main LI--> 
 
    </ul> 
 
    <!--end main UL--> 
 
    </div> 
 
    <!--end navmenu--> 
 
    <div class="navmenu"> 
 
    <ul> 
 
     <li><a class="bold long" href="Case Experience Synopsis.pdf">Partial Case<br>Experience Summary</a> 
 
    </ul> 
 
    <!--end inner UL--> 
 
    </li> 
 
    <!--end main LI--> 
 
    </ul> 
 
    <!--end main UL--> 
 
    </div> 
 
    <!--end navmenu--> 
 
    <div class="navmenu"> 
 
    <ul> 
 
     <li><a class="bold" href="https://www.myfloridalicense.com/LicenseDetail.asp?SID=&id=68D81F7B226A04EF73021FA90FD37339" target="_blank">FL State License</a> 
 
     </li> 
 
     <!--end main LI--> 
 
    </ul> 
 
    <!--end main UL--> 
 
    </div> 
 
    <!--end navmenu--> 
 
</div> 
 
<!--end wrapper-->

回答

1

爲什麼不乾脆把

.navmenu { 
    padding: 0; 
    z-index: 2; 
    clear: none; 
    margin-top: -13px; 
    margin-left: 0; 
    margin-right: 0; 
} 
+0

感謝。代替? – Bob

+0

試過以上代替:.navmenu { \t padding:0; \t display:block; \t z-index:2; \t明確:無; \t margin-top:-13px; \t margin-left:auto; \t margin-right:auto; }沒有變化 – Bob

+0

粘貼代替:.navmenu { \t padding:0; \t display:block; \t z-index:2; \t明確:無; \t margin-top:-13px; \t margin-left:auto; \t margin-right:auto; } 並沒有改變。 – Bob