Question

我创建了一个带有标题，横幅，页脚的html文件，如下所示。我正在调整导航链接但由于某种原因它没有对齐内联。问题在于导航ID。任何帮助都会有很大的帮助。

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; 
}

Answer 1

我认为你不需要显示：内联你的李。

你还应该将float：left放在导航UL的'a'标签上，然后移除显示：内嵌在它们上面。

您还可以在类'navIEPadder'上添加overflow：auto。

希望有所帮助。

Django CSS元素未按预期对齐

1 个答案: