我是 HTML/CSS 的新手，在学习了一些教程之后，我的 HTML 文件和 CSS 样式表之间仍然存在问题。
我想将 padding-left 应用到我的类 nav navbar-nav navbar-right 以便将我类中的元素放在我的右侧导航栏。
这是我的 HTML 文件:
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
{% load user_tags %}
<title> DatasystemsEC - Accueil </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
.marginBottom-0 {margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
</style>
</head>
<body>
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
</div>
<!-- Home tab -->
<ul class="nav navbar-nav">
<li><a href="{% url "accueil" %}"> <span class="glyphicon glyphicon-home"></span> Accueil </a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Informations Mairie
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "{% url "Mairieform" %}"> <span class="glyphicon glyphicon-pencil"></span> Créer/Editer les informations de la Mairie </a></li>
<li><a href = "{% url "Mairieresume" %}"> <span class="glyphicon glyphicon-home"></span> Consulter les informations de la Mairie </a></li>
</ul>
</li>
<!-- Resume Tab with acts -->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Actes Etat Civil <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-baby-formula">
</span> Fiches Individuelles
</a>
<ul class="dropdown-menu">
<li><a href="#">Accueil Fiches Individuelles</a></li>
<li><a href="#">Création Fiches Individuelles</a></li>
<li><a href="#">Consultation Fiches Individuelles</a></li>
<li><a href="#">Edition Fiches Individuelles</a></li>
<li><a href="#">Suppression Fiches Individuelles</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance</a>
<ul class="dropdown-menu">
<li><a href="#">Accueil Actes de Naissance</a></li>
<li><a href="#">Création Actes de Naissance</a></li>
<li><a href="#">Consultation Actes de Naissance</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a href="{% url "logout" %}"><span class="glyphicon glyphicon-log-out"></span> Déconnexion </a></li>
<li><a>{{user.username}} </a></li>
{% else %}
<li><a href="{% url "login" %}"><span class="glyphicon glyphicon-log-in"></span> Connexion </align></a></li>
{% endif %}
{% if request.user|has_group:"admin" %}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/admin.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"visiteur"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/visiteur.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"employé"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/employé.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"officier"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/officier.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"maire"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/maire.png' %}{{ user.get_profile.avatar }}">
{% endif %}
</li>
</div>
</nav>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
</body>
{% block content %}
{% endblock content %}
</html>
这是我的 CSS 文件:
/* ###################################################### */
/* CSS File about BirthCertificate application properties */
/* ###################################################### */
/* Define background color from upper navbar */
.navbar-inverse {
background-color: #0083A2;
}
/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
color : white;
}
/* Tab properties from navbar */
.navbar .nav > li > a {
color: white;
}
.navbar .nav > li > a:hover {
color: #454545;
}
/* This line*/
.nav .navbar-nav .navbar-right {
padding-left: 500px ;
}
.active {
background-color: #454545;
}
/* Titles properties */
h1, h2, h4 {
color: #0083A2;
}
/* Define button properties */
.button {
display: inline;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
font-size: 16px;
background-color: #e7e7e7;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
/* Define form fields properties */
.form-fields {
border-radius: 8px;
margin-right: auto;
}
.col-sm-6 {
display:inline-block;
margin-left : 10px;
width: 30%;
list-style: none;
}
.col-sm-8 {
list-style: initial;
}
.col-sm-10 {
display:inline-block;
margin-left : 10px;
width: 800%;
list-style: none;
}
/* Hoover button properties */
.button:hover {
background-color: #0083A2;
color: #454545;
}
/* Hoover color dropdown menu */
.dropdown-menu>li>a:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #0083A2;
}
.dropdown-menu li:hover .dropdown-menu {
position:static;
}
.logo {
position : fixed ;
top:0;
left:100px;
}
@justify {
text-align: justify;
}
我的 HTML/CSS 文件给我:
你能给我一些建议吗？
最佳答案
你试过吗
float: right;
如果您使用的是 Bootstrap ，您应该检查文档并确保正确插入 html 标签:http://getbootstrap.com/components/#navbar
你的类(class)也应该是:
.nav.navbar-nav.navbar-right
关于javascript - HTML类和CSS样式表之间的不理解，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41931671/