0
下面是頁面的CSS代碼：如何使菜單選項卡具有相同的寬度並居中對齊它們中的內容？
#drop-nav {
width: 1000px;
position: absolute;
}
#contentwrap {
margin-top: 40px;
}
ul li ul li a {
padding: 10px 18px 5px 0px;
text-align: left;
width: 100%;
display: table-cell;
}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow: visible;
position: static;
}
ul li {
border: 1px solid #000000;
display: block;
position: relative;
float: left;
background-color: white;
}
li ul {
display: none;
background-color: #3333ff;
}
ul li a {
padding: 10px 18px 5px 90px;
background: #3333ff none repeat scroll 0% 50%;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
overflow: visible;
text-align: center;
display: block;
}
ul li a:hover {
background: #3366ff none repeat scroll 0% 50%;
overflow: visible;
}
li:hover ul {
display: block;
position: relative;
overflow: visible;
}
li:hover li {
float: none;
background-color: #3366ff;
}
li:hover a {
background: #2346b1 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #40a3f6 none repeat scroll 0% 50%;
}
#drop-nav li ul li {
border-top: 0px none;
overflow: visible;
visibility: visible;
font-family: Arial,Helvetica,sans-serif;
text-align: justify;
clear: none;
display: table;
width: 100%;
}
#content {
border-left: 1px solid gray;
border-right: 1px hidden gray;
padding: 1em;
background-color: #dff4ff;
float: left;
width: 616px;
}
#rightcolumn {
border: 9px hidden #dff4ff;
margin: 0 0 -1pt;
padding: 1em 1em 47px;
float: right;
clear: right;
visibility: visible;
width: 160px;
background-color: #ffffcc;
max-width: 600px;
overflow: hidden;
font-size: 8pt;
font-weight: normal;
font-family: Arial;
}
#container {
border: 4px solid gray;
margin: 10px auto;
color: #333333;
line-height: 130%;
max-width: 900px;
background-color: #dff4ff;
overflow: hidden;
}
#footer {
clear: both;
background-color: #dff4ff;
height: 56px;
}
下面是頁面的HTML代碼：
<body>
<div id="container">
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<center><img style="width: 456px; height: 142px;"
src="wkrp_c.gif" alt="logo"></center>
<p>
<big
style="font-family: Helvetica,Arial,sans-serif;"><big>
Wisnia-Kapp Reading Programs</big></big></p>
<center></center>
<a target="_blank" href="http://www.jwisnia.com/wpcms/"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="arrow-88-32.png" align="middle"></a><a
target="_blank" style="font-style: italic;"
href="http://www.jwisnia.com/wpcms/">Visit Judith
Wisnia & Assoc.</a><br>
<br>
</div>
</div>
</div>
<ul id="drop-nav">
<li><a href="#">Home</a>
</li>
<li><a href="about.html">About</a>
<ul>
<li><a href="students.html">Students</a></li>
<li><a href="programs.html">Programs</a></li>
<li><a href="trainings.html">Trainings</a></li>
</ul>
</li>
<li><a href="services.html">Services Offered</a>
</li>
<li><a href="products.html">Our Products</a></li>
<li><a target="_blank"
href="http://www.jwisnia.com/wpcms/contact-us-2/">Contact</a>
</li>
</ul>
<div id="contentwrap">
<div id="content">
<p style="font-family: Helvetica,Arial,sans-serif;"><b><span
style="text-decoration: underline;">Overview</span></b></p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>WKRP</b> is
a rule-governed, multisensory program that involves
phonological awareness training using storytelling and
imagery. <b style="font-family: Helvetica,Arial,sans-serif;">The
WKRP Programs</b><span
style="font-family: Helvetica,Arial,sans-serif;"> were
developed by</span><b
style="font-family: Helvetica,Arial,sans-serif;"> </b>Sharon
Kapp,<b style="font-family: Helvetica,Arial,sans-serif;">
</b><span style="font-family: Helvetica,Arial,sans-serif;">a Speech
Language Pathologist.</span> </p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Judith
Wisnia and Associates ("JWA")</b>
is a private group
practice in Speech/Language therapy, Occupational therapy, Physical
therapy, and tutoring/executive function services. JWA has
been
helping children since 1980. <b>JWA</b> provides <b>WKRP</b>
staff
training
and certification programs as well as contracted direct services in
school
systems in Massachusetts. Our staff has provided direct
services
to over 3,000 children. Countless other children have received <b>WKRP</b>
instruction from school teachers and individual practitioners and
tutors. </p>
<span style="font-family: Helvetica,Arial,sans-serif;"></span> <span
style="font-family: Helvetica,Arial,sans-serif;"></span><br
style="font-family: Helvetica,Arial,sans-serif;">
<span style="font-family: Helvetica,Arial,sans-serif;"> </span><span
style="font-family: Helvetica,Arial,sans-serif;"><img
style="width: 30px; height: 30px;" alt=""
src="confetti-th.png" align="top"></span><span
style="font-family: Helvetica,Arial,sans-serif;"> </span><b
style="font-family: Helvetica,Arial,sans-serif;">WKRP</b><span
style="font-family: Helvetica,Arial,sans-serif;"> is
celebrating its 24th year of providing multisensory rule-governed
phonics</span><span
style="font-family: Helvetica,Arial,sans-serif;"></span><span
style="font-family: Helvetica,Arial,sans-serif;"> materials
and
teacher instruction.
</span><span
style="font-family: Helvetica,Arial,sans-serif;"></span><span
style="font-family: Helvetica,Arial,sans-serif;"></span><span
style="font-family: Helvetica,Arial,sans-serif;"> </span></div>
</div>
<div style="font-family: Helvetica,Arial,sans-serif;"
id="rightcolumnwrap"><big>
</big>
<div id="rightcolumn">
<p><big><span style="font-weight: bold;">Contact
Us:</span><br>
</big></p>
<p><big><span
style="font-family: Helvetica,Arial,sans-serif;">Judith
Wisnia and Associates, Inc.</span><br
style="font-family: Helvetica,Arial,sans-serif;">
<span style="font-family: Helvetica,Arial,sans-serif;">111
South Bedford St</span><br
style="font-family: Helvetica,Arial,sans-serif;">
<span style="font-family: Helvetica,Arial,sans-serif;">Suite
102</span><br style="font-family: Helvetica,Arial,sans-serif;">
<span style="font-family: Helvetica,Arial,sans-serif;">Burlington,
MA 01803</span><br>
<br>
<img style="width: 24px; height: 24px;" alt="call"
src="phone-51-32.png" align="middle">781.272.2100<br>
<a
href="mailto:[email protected],[email protected]"><img
style="border: 0px solid ; width: 24px; height: 24px;"
alt="email" src="email-12-32.png" align="middle"></a><a
href="mailto:[email protected],[email protected]">Email
Us</a><br>
<a
href="https://www.facebook.com/pages/Judith-Wisnia-><img
style="border: 0px solid ; width: 32px; height: 32px;"
alt="Facebook" src="facebook-3-32.png"></a>
<big></p>
</div>
<div id="footerwrap">
<div id="footer">
<p> Copyright © 2014 Judith Wisnia and
Associates, Inc. <a
href="http://home.comcast.net/%7Ejwisnia18/"><img
style="border: 2px solid ; width: 34px; height: 19px;"
alt="mainlogo"
src="http://home.comcast.net/%7Ejwisnia18/wkrp/jwalogo.gif"
align="middle"></a></p>
</div>
</div>
</div>
</div>
當前菜單項的權利和標籤寬度不均勻。他們需要對齊和等寬。子菜單項也應居中對齊並且寬度相等。
JsFiddle將幫助可視化問題。 – 2014-09-19 20:15:39