Django CSS元素沒有像預期的那樣對齊

我創建了一個帶有標題，橫幅，頁腳的HTML文件，下面給出了..我試圖對齊導航鏈接，但由於某種原因它沒有對齊內聯。問題在於導航ID。任何幫助都會有很大的幫助。Django CSS元素沒有像預期的那樣對齊

base.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" > 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>DJANGO E-Commerce website</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>{% block title %}{% if page_title %}{{ page_title }} - {% endif %} ?  
      {{ site_name }}{% endblock %}</title> 
    <meta name="keywords" content="{{ meta_keywords }}" /> 
    <meta name="description" content="{{ meta_description }}" /> 
    <link rel="Stylesheet" type="text/css" href="{{ MEDIA_URL }}css.css" /> 
    <!-- <link rel="stylesheet" href="/site_media/css.css" 
     type="text/css" /> --> 

    <!--<script src="/site_media/jquery.js" type="text/javascript"></script>--> 
</head> 
<body> 
    {% block site_wrapper %}{% endblock %} 
</body> 
</html>

catalog.html

{% extends "base.html" %} 
{% block site_wrapper %} 
<div id="main"> 
    <a href="#content" class="skip_link">Skip to main content</a> 
    <div id="banner"> 
      <div class="bannerIEPadder"> 
       <div class="cart_box"> 
       [link to cart here] 
       </div> 
       Modern Musician 
      </div> 
    </div> 
    <div id="navigation"> 
      <div class="navIEPadder"> 
       {% include "tags/navigation.html" %} 
      </div> 
    </div> 
    <div id="middle"> 
      <div id="sidebar"> 
       <div class="sidebarIEPadder"> 
       [search box here] 
       <br /> 
       {% include "tags/category_list.html" %} 
       </div> 
      </div> 
      <div id="content"> 
       <a name="content"></a> 
       <div class="contentIEPadder"> 
        {% block content %}{% endblock %} 
       </div> 
      </div> 
    </div> 
    <div id="footer"> 
      <div class="footerIEPadder"> 
       [footer here] 
      </div> 
    </div> 
</div> 
{% endblock %}

Navigation.html

<u1> 
    <li><a href="/catalog/">Home</a></li> 
    <li><a href="/catalog/">About</a></li> 
    <li><a href="/catalog/">Privacy</a></li> 
    <li><a href="/catalog/">Products</a></li> 
    <li><a href="/catalog/">Contact</a></li> 
</u1> 
<div class="cb"></div>

css.css

*{ 
    margin:0; 
    padding:0; 
} 

html{ 
    font-size:medium; 
} 

html,body{ 
    background-color:Blue; 
} 

.cb{ 
    clear:both; 
} 

.fr{ 
    float:right; 
} 

.fl{ 
    float:left; 
} 

.bn{ 
    border:none; 
} 

#main{ 
    margin: 0 auto; 
    width:900px; 
    background-color:White; 
} 

.bannerIEPadder, .sidebarIEPadder, .contentIEPadder{ 
    padding:10px; 
} 

.navIEPadder, .footerIEPadder{ 
    padding:5px; 
} 

#banner{ 
    width:900px; 
    height:75px; 
    background-color:DarkOrange; 
    color:White; 
    font-size:36px; 
    font-weight:bold; 
    position:relative; 
} 

div.cart_box{ 
    position:absolute; 
    top:20px; 
    right:10px; 
    font-size:medium; 
} 

div.cart_box a{ 
    color:white; 
} 

#sidebar{ 
    width:200px; 
    float:left; 
} 

#content{ 
    width:700px; 
    float:left; 
} 

#footer{ 
    clear:both; 
    background-color:#98AC5E; 
    color:White; 
    text-align:center; 
} 

a.skip_link{ 
    position:absolute; 
    left:-1000px; 
    top:-1000px; 
} 

#navigation ul{ 
    list-style-type:None; 
    margin:0; 
    padding:0; 
} 

#navigation ul li{ 
    float:left; 
    margin-right:15px; 
    display:inline; 
} 

#navigation ul li a{ 
    color:White; 
    font-weight:bold; 
    text-decoration:underline; 
    display:inline; 
} 

#navigation ul li a:hover{ 
    color:#616161; 
    background-color:Red; 
    text-decoration:none; 
} 

a{ 
    color:#98AC5E; 
    font-weight:bold; 
    text-decoration:none; 
} 
a:hover{ 
    text-decoration:underline; 
} 

/* category page styles */ 
div.product_thumbnail{ 
    text-align:center; 
    float:left; 
    width:150px; 
    height:200px; 
} 

/* product page styles */ 
div.product_image{ 
    float:left; 
    padding:0 10px 10px 0; 
}

來源

2012-07-16 user1050619

我不認爲你需要顯示：內聯你的李。

您還應該將float：留在導航UL中的'a'標籤上，然後移除顯示內聯。

你也可以在類'navIEPadder'上放置overflow：auto。

希望有所幫助。

來源

2012-07-16 21:22:24

THANKs爲響應..問題是我的無序列表，而不是UL的聲明我做U1 ... – user1050619 2012-07-17 20:16:10

Django CSS元素沒有像預期的那樣對齊

回答

相關問題