1
我希望.menu-box-middle ul列表項目以內聯方式顯示，但是所有列表項目都相互重疊！我無法弄清楚如何改變它。理想情況下，我希望它們在主容器中的頁面上均勻分佈。當我改變菜單顯示時，li項目彼此重疊：inline
HTML和CSS可以在這裏找到：http://codepen.io/anon/pen/Mbbbmv
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Anthony and Nicola's wedding</title>
<link href="tplcss/samplestyle/style.css" rel="stylesheet" type="text/css" />
<link href="http://default.gettingmarried.co.uk/src/css/common.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://default.gettingmarried.co.uk/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="http://default.gettingmarried.co.uk/src/js/common.js"></script>
<script src="http://default.gettingmarried.co.uk/src/js/prototype-1603-minified.js" type="text/javascript"></script>
<script src="http://default.gettingmarried.co.uk/src/editjs/src/scriptaculous.js" type="text/javascript"></script>
<meta name="description" content="Nicola Bobins and Anthony Cross are getting married on Wednesday 13th January 2010." />
<meta name="keywords" content="wedding,Anthony,Nicola,Nicola Bobins and Anthony Cross,wedding site,www.gettingmarried.co.uk,Anthony and Nicola's wedding" />
<script src="http://default.gettingmarried.co.uk/src/sifr436/js/sifr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://default.gettingmarried.co.uk/src/sifr436/css/sifr.css" type="text/css">
<!-- font: This part is editable via your control panel -->
<SCRIPT LANGUAGE="JavaScript">
var myfont = { src: 'http://default.gettingmarried.co.uk/src/sifr436/fonts/PalaceScriptMT[regular]436.swf' };
sIFR.activate(myfont);
sIFR.replace(myfont, {
selector: 'h1',wmode: 'transparent',
css: [ '.sIFR-root {color: #000000 ;font-size: 60px;}' ]
});
</SCRIPT>
</head>
<body>
<!-- Overlay shaded div for hover window -->
<div id="overlayfilm" style="display:none"></div>
<div class="main-container">
<div class="top-thin-bar"><span class="main-table-top-banner"><strong>Wednesday 13th January 2010 - </strong> 52 days to go</span></div>
<!-- <div id="weatherbox">10 days before?<br />
<br />
Show weather here!</div> -->
<div class="left-panel">
<div class="menu-box-top1"></div>
<div class="menu-box-middle">
<ul>
<li>The Wedding
<ul id="Aitem_list">
<li id="Aitem_65" class="selected">
<a href="Home.htm" title="Home" class="menu">Home
</a>
</li>
<li id="Aitem_66" >
<a href="About_Us.htm" title="About Us" class="menu">About Us
</a>
</li>
<li id="Aitem_68" >
<a href="Reception.htm" title="Reception" class="menu">Reception
</a>
</li>
<li id="Aitem_67" >
<a href="Ceremony.htm" title="Ceremony" class="menu">Ceremony
</a>
</li>
<li id="Aitem_69" >
<a href="Timetable.htm" title="Timetable" class="menu">Timetable
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-box-bottom1"></div></div>
<div class="right-panel" id="right-panel-frame">
<div class="intro-panel"> <h1>Our Wedding</h1><img height="333" border="0" align="right" width="250" class="photo-align-right" alt="image" src="http://www.gettingmarried.co.uk/siteimages/thumbnail_200903021623420000006dfda5a286177a3903c2c31b11c20bb4.jpg"/> <span id='homepage_intro'>This is a sample file that contains most elements that you may require to create a new CSS style.<br><br>Sadly we are unable to change the HTML template layout, but the CSS file is fully editable by you.<br><br>Once you have finished, please email the files as a ZIP archive to [email protected] We will then import your CSS style into the GettingMarried.co.uk system.<br><br>Please note: by sending us your CSS file and images, you agree to transfer any copyright or ownership of the design to GettingMarried.co.uk. You also confirm that you have not used any copyrighted images without permission from the copyright holder. You will accept full liability for breach of copyright. You also confirm that your CSS file may be used on our other members' sites, and by sending us your files, you are confirming your agreement of these terms and conditions.</span><br/>
<br style="clear:both;">
</div>
<div class="front-page-boxes-wrapper">
<div class="front-page-boxes-left">
<p><em>The Wedding</em></p>
<p class="front-page-boxes-text">My Wedding box testing</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-middle">
<p><em>Organisation</em></p>
<p class="front-page-boxes-text">My wedding box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-right">
<p><em>Memories</em></p>
<p class="front-page-boxes-text">My Wedding Box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
</div>
<!-- ABOUT US -->
<h1>About Us</h1>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Penny</strong></p>
<p><img height="147" align="left" width="100" alt="Penny" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-bride-100px.jpg"/><span id="about_bride" >Age: 26<br/><br/>Middle Name: Rose<br/><br/>Likes: Bunting! <br/><br/>Dislikes: Getting up in the morning </span></p></td>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Andrew</strong></p>
<p><img height="147" align="left" width="100" alt="Andrew" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-groom-100px.jpg"/><span id="about_groom" >Age: 27<br/><br/>Middle Name: Donald<br/><br/>Likes:Everything to be tidy<br/><br/>Dislikes: Penny's Topshop Account </span></p></td>
</tr>
</table>
<p><strong>How we met...</strong></p>
<span id="about_howmet" >Way way back at guide and scout camp in 1995 </span><p></p>
<p><strong>The proposal...</strong></p>
<span id="about_proposal" >Sleep deprived and slightly drunk on mojitos in Cuba, December 2007 </span><p></p>
<!-- GIFT LIST -->
<h1>Gift List</h1>
<p><span id="giftlist_intro" >Introduction text for the giftlist page.</span></p>
<p><strong>The Online Gift List</strong></p>
<p>Please remember to click the "Mark as purchased" link to mark items as purchased to prevent duplications.</p>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td class="giftlist-header-row">Shop Name</td>
<td class="giftlist-header-row">Description</td>
<td class="giftlist-header-row">Cost</td>
<td class="giftlist-header-row">Quantity</td>
<td class="giftlist-header-row">Options</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Argos.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1966" onclick="JT_show('ajax-purchase-giftview.php?giftid=1966&gifturl=giftgo.php%3Fid%3D1966',this.id,this.name);" name="Did you buy this Gift?" id="giftID1966">3 tier steamer</a></td>
<td class="giftlist-row-purchased">£19.99</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3031" onclick="JT_show('ajax-purchase-giftview.php?giftid=3031&gifturl=giftgo.php%3Fid%3D3031',this.id,this.name);" name="Did you buy this Gift?" id="giftID3031">Black 19cm rectangular stoneware dish</a></td>
<td class="giftlist-row-purchased">£15</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1963" onclick="JT_show('ajax-purchase-giftview.php?giftid=1963&gifturl=giftgo.php%3Fid%3D1963',this.id,this.name);" name="Did you buy this Gift?" id="giftID1963">blue spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1960" onclick="JT_show('ajax-purchase-giftview.php?giftid=1960&gifturl=giftgo.php%3Fid%3D1960',this.id,this.name);" name="Did you buy this Gift?" id="giftID1960">blue spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Drinkstuff.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1859" onclick="JT_show('ajax-purchase-giftview.php?giftid=1859&gifturl=giftgo.php%3Fid%3D1859',this.id,this.name);" name="Did you buy this Gift?" id="giftID1859">Cocktail starter pack</a></td>
<td class="giftlist-row-purchased">£39.92</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Welch.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=2805" onclick="JT_show('ajax-purchase-giftview.php?giftid=2805&gifturl=giftgo.php%3Fid%3D2805',this.id,this.name);" name="Did you buy this Gift?" id="giftID2805">cookn=book stand - light blue</a></td>
<td class="giftlist-row-purchased">£27.25</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-rowa">Debenhams.com </td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">Cream piglets salt and pepper pots</a></td>
<td class="giftlist-rowa">£15.50</td>
<td class="giftlist-rowa">1</td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">View</a> | <a onclick="JT_show('ajax-purchase-gift.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);return false;" name="Please Confirm Your Details..." id="giftID3017" href="#">Mark as purchased</a></td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1962" onclick="JT_show('ajax-purchase-giftview.php?giftid=1962&gifturl=giftgo.php%3Fid%3D1962',this.id,this.name);" name="Did you buy this Gift?" id="giftID1962">cream spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1961" onclick="JT_show('ajax-purchase-giftview.php?giftid=1961&gifturl=giftgo.php%3Fid%3D1961',this.id,this.name);" name="Did you buy this Gift?" id="giftID1961">cream spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Lauraashley.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1696" onclick="JT_show('ajax-purchase-giftview.php?giftid=1696&gifturl=giftgo.php%3Fid%3D1696',this.id,this.name);" name="Did you buy this Gift?" id="giftID1696">duck egg bed linen - oxford pillowcases</a></td>
<td class="giftlist-row-purchased">£14.69</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3032" onclick="JT_show('ajax-purchase-giftview.php?giftid=3032&gifturl=giftgo.php%3Fid%3D3032',this.id,this.name);" name="Did you buy this Gift?" id="giftID3032">Granite petite round casserole dish</a></td>
<td class="giftlist-row-purchased">£10</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
</tbody></table>
</tbody></table>
<h1>Our Wedding</h1>
<p>Upload your high resolution wedding photos to Andrew and Penny's online photo album here. <br/><br/>Our site will automatically create web-friendly images, whilst the high resolution images will also be stored, allowing us to design a beautifully-printed photobook of our special day through our guests' eyes.</p>
<form action="uploadimages.php" method="POST" name="gbook">
<div class="front-page-boxes">
<strong>Upload your photos</strong> (Step 1 of 2)
<br/><table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Your name: </td>
<td><input name="name" type="text" id="name" size="30"/></td>
</tr>
<tr>
<td nowrap="nowrap">Email address: *</td>
<td><input name="email" type="text" id="email" size="30"/></td>
</tr>
<SCRIPT LANGUAGE="JavaScript">
<!--
function callme(){
var row = document.getElementById("showme");
if(document.gbook.usealbum.value=='0'){
row.style.display='';
}else{
document.gbook.newname.value='';
row.style.display='none';
}
}
//-->
</SCRIPT>
<tr>
<td nowrap="nowrap">Select destination album:</td>
<td>
<select name="usealbum" OnChange="callme();"><option>Please Select</option><option value='0' selected>Create a new photo album</option>
<option value="from your American " >Test album 1</option>
<option value="Scotty's photos of the big day" >Test album 2</option>
</select>
</td>
</tr>
<tr ID='showme' >
<td nowrap="nowrap">Title for your new album:</td>
<td><input name="newname" type="text" id="email" size="30"/></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"> </td>
<td align="left"><input type="submit" name="Submit" id="Submit" value="Go >" /></td>
</tr>
<tr>
<td colspan="3">
<font size="1">* Note: email address is stored <b>only</b> for Name1 and Name2's private use</font>
</td>
</tr>
</table>
</div>
</form>
<br/>Please note: all photos must be personally approved by us before they go live on the site, so there may be a slight delay before you see it in the albums.
</div>
<p> </p>
<br class="clearbreak" />
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
@charset "utf-8";
/* BASIC ELEMENTS */
/* NB: The h1 style is set up separately on the "customise design page" */
body {
background-image: url(../../tplcss/samplestyle/images/bg-small-2.gif);
background-repeat: repeat;
background-position: center;
padding-left: 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
a {
color: #1d192f;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #1d192f;
}
form {
margin: 0px;
padding: 0px;
}
.submit-button {
background-color: #FFFFCC;
margin-top: 10px;
border: 1px solid #DC5050;
height: 30px;
}
/* ----------- GENERAL ELEMENTS ---------------- */
.main-table {
background-color: #FFFFFF;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
padding: 0px;
}
.main-content {
padding-top: 30px;
padding-left: 25px;
padding-right: 15px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
.main-container {
background-color: #ffffff;
background-repeat: no-repeat;
background-position: 0px 0px;
width: 900px;
margin-top:-16px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
position: relative;
}
.main-container .top-thin-bar {
visibility: hidden;
background-repeat: no-repeat;
height: 22px;
width: 1100px;
top: 160px;
position: absolute;
background-position: 0px 0px;
text-align: center;
padding-top: 7px;
left: 0px;
margin-left: -122px;
font-size: 10pt;
}
.main-container .right-panel .intro-panel {
width: auto;
min-height: 333px;
font-size: 14px;
line-height: 20px;
color: #193429;
}
.main-footer {
width: 880px;
margin-right: auto;
margin-bottom: 0px;
background-repeat:no-repeat;
margin-left: auto;
height: 60px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #FFB9B9;
border-bottom-color: #FFB9B9;
border-left-color: #FFB9B9;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
clear: both;
}
.main-footer .left-links {
width:300px;
height:100%;
float:left;
}
.main-footer .right-logo {
visibility: hidden;
width:400px;
float:right;
text-align:right;
}
.left-panel {
width: auto;
margin-top: 15px;
padding-left: 20px;
margin-bottom: 20px;
}
.right-panel {
width: auto;
margin-top: 220px;
margin-right: 30px;
margin-bottom: 35px;
}
.leftmenu {
padding-left: 15px;
width: 200px;
padding-top: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
}
.clearbreak {
clear:both;
height:10px;
overflow:hidden;
}
.main-table-top-banner {
visibility: hidden;
text-align: center;
background-repeat: no-repeat;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #999999;
}
.main-table-top-banner-sub {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
}
.main-bottom-strip {
padding: 10px;
border-top: 1pt solid #CCCCCC;
background: #EEEEEE;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
}
.main-bottom-strip a {
color: #666666;
}
.main-bottom-strip a:visited {
color: #666666;
}
.main-bottom-strip a:hover {
color: #AAAAAA;
}
.table-light-padding {
padding: 3px;
padding-bottom: 7px;
}
.redtext {color: #DC5050}
.smaller-text-indent {
font-size: 10pt;
padding-left: 20px;
}
.text-indent {
padding-left: 20px;
}
.editingtextarea {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
background-color: #FFFFFF;
border: 1px dotted #E98E95;
}
/* Menu bar */
.menu-box-top1 {
height: 0px;
width: 180px;
background-repeat: no-repeat;
margin: 0px;
background-position: bottom;
}
.menu-box-middle {
background-color: #FFFFFF;
margin: 0px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 1px;
padding-left: 10px;
}
.menu-box-middle p {
font-style: italic;
padding-bottom: 0px;
}
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :(*/
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
.menu-box-middle a {
color: #E96461;
text-decoration: none;
border-bottom: 1px solid #b0c5bc;
line-height: 25px;
}
.menu-box-middle a:visited {
color: #E96461;
}
.menu-box-middle a:hover {
color: #EF8F8D;
}
.menu-box-bottom1 {
background-image: url(http://default.gettingmarried.co.uk/images/css-img/bottom-rounded.gif);
background-repeat: no-repeat;
width: 180px;
height: 10px;
margin: 0px;
}
/* ----------- FRONT PAGE ELEMENTS ------------- */
/* Front three boxes */
.front-page-boxes-wrapper {
float: right;
width: 640px;
margin-right: 0px;
margin-bottom: 40px;
margin-top: 20px;
height: 170px;
}
.front-page-boxes-wrapper em {
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color:#666666;
letter-spacing: 2px;
font-style: normal;
font-weight: bold;
}
.front-page-boxes-wrapper p {
margin-top:0;
}
.front-page-boxes {
border: 1px dotted #FFA8A8;
padding: 10px;
}
.front-page-boxes a {
color: #3399CC;
}
.front-page-boxes a:visited {
color: #3399CC;
}
.front-page-boxes a:hover {
color: #3399CC;
}
.front-page-boxes-text {
font-size: 10pt;
line-height: 18px;
color: #253630;
}
.front-page-boxes-left {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
height: 100%;
background-color: #D7EBFF;
color: #0066FF;
}
.front-page-boxes-middle {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background-color: #FADBDA;
}
.front-page-boxes-right {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background: #D7EBFF;
}