导航栏和页脚之间的主容器内的填充

时间：2020-05-21 05:49:38

标签： html css

大家好，标题说的是，我有一个导航栏和一个页脚，现在我还没有将页脚固定在底部。但是我没有那么容易受到攻击的代码，这就是为什么我无法找到导致问题的原因。现在，问题开始了，在页眉和页脚之间，内容应从开头开始，这意味着0填充和0边距，但以某种方式添加了padding-left -问题图片 enter image description here

我的主文件

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/onio.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/themify-icons.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="js/onio.js"></script>
        <script type="text/javascript" src="js/onio_split.js"></script>
    </head>
    <body style="overflow: none;">
        <?php include 'core/main.php'; ?>
    </body>
</html>

我的html 

<nav class="onio_nav">
    <ul class="onio_item_left">
        <li class="onio-item">
            <div class="bars_container">
                <i class="fa fa-bars"></i>
            </div>
        </li>
    </ul>
    <ul class="onio_item_right">
        <li class="onio-item px">
            <div class="private_container px">
                <i class="fa fa-envelope" class="envelope"></i>
            </div>
        </li>
        <li class="onio-item px">
            <div class="private_container px">
                <i class="fa fa-globe" style="padding-left: 9px;"></i>
            </div>
        </li>
        <li class="onio-item px">
            <div class="private_container px">
                <i class="fa fa-headphones"></i>
            </div>
        </li>
        <li class="onio-item px">
            <div class="logo_container">
                <img src="default_images/default_avatar.png" />
            </div>  
        </li>
        <div class="dropdown">
            <ul>
                <li>
                    <i class="fa fa-user"></i> My Profile
                </li>
                <li>
                    <i class="fa fa-user"></i> My Profile
                </li>
            </ul>
        </div>
    </ul>   
</nav>
sdsd
<nav class="onio_nav">

</nav>

我的CSS 

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    width: 100%;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
nav {
    width: 100%;
    height: 50px;
    background-color: #2c3e50;
}
.onio-item {
    padding-top: 7px;
}
.onio_item_left {
    padding-left: 10px;
    float: left;
}
.onio_item_right {
    float: right;
    padding-top:1px;
}
.px {
    padding-right: 10px;
}
.onio_item_right li {
    display: inline-block;
}
.bars_container {
    width: 35px;
    height: 35px;
    background-color: #34495e;
    border-radius: 50%;
    color: #7f8c8d;
    cursor: pointer;
    transition: color 0.9s;
}
.bars_container i {
    padding-left: 9.3px;
    padding-top: 7.8px;
    font-size: 19px;
}
.private_container {
    width: 30px;
    height: 30px;
    background-color: #34495e;
    border-radius: 50%;
    color: #7f8c8d;
    cursor: pointer;
    transition: color 0.9s;
}
.private_container i {
    padding-left: 8.5px;
    padding-top: 8px;
    font-size: 14px;
}
.bars_container:hover {
    background: linear-gradient(200deg, rgba(58,180,177,1) 21%, rgba(29,253,217,1) 79%);
    color: white;
}
.private_container:hover {
    background: linear-gradient(200deg, rgba(58,180,177,1) 21%, rgba(29,253,217,1) 79%);
    color: white;
}
.logo_container img {
    width: 35px;
    border-radius: 50%;
}
.dropdown {
    background-color: #2c3e50;
    margin-top: 7px;
    margin-right: 15px;
    display: none;

}
.dropdown li {
    display: block;
    padding: 10px;
    border-bottom: 1px solid black;
    color:  white;
    z-index: 999;
}
.dropdown li:hover {
    box-shadow: 0 0 10px #2c3e50, 0 0 40px #2c3e50, 0 0 80px #2c3e50;
}

4 个答案:

答案 0 :(得分：0)

<ul>标记的所有padding-inline-start子元素还具有<li>作为css值。如果您要删除它，则应该执行以下操作：

ul {
    padding-inline-start: 0;
}

或者，如果您只希望某些<ul>元素没有填充，则可以使用类。

答案 1 :(得分：0)

由于您的代码包含ul和li，因此默认情况下ul标签中包含一些填充，因此很容易删除，只需通过ul tag或adding a class选择ul然后在CSS中将其称为0px

我附上了JS小提琴，例如： https://jsfiddle.net/anft8huo/

在此示例中，您可以删除CSS中的填充以查看其影响。

答案 2 :(得分：0)

一个简单的解决方案是仅添加主标记并将填充边距设置为0。

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    width: 100%;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
nav {
    width: 100%;
    height: 50px;
    background-color: #2c3e50;
}
.onio-item {
    padding-top: 7px;
}
.onio_item_left {
    padding-left: 10px;
    float: left;
}
.onio_item_right {
    float: right;
    padding-top:1px;
}
.px {
    padding-right: 10px;
}
.onio_item_right li {
    display: inline-block;
}
.bars_container {
    width: 35px;
    height: 35px;
    background-color: #34495e;
    border-radius: 50%;
    color: #7f8c8d;
    cursor: pointer;
    transition: color 0.9s;
}
.bars_container i {
    padding-left: 9.3px;
    padding-top: 7.8px;
    font-size: 19px;
}
.private_container {
    width: 30px;
    height: 30px;
    background-color: #34495e;
    border-radius: 50%;
    color: #7f8c8d;
    cursor: pointer;
    transition: color 0.9s;
}
.private_container i {
    padding-left: 8.5px;
    padding-top: 8px;
    font-size: 14px;
}
.bars_container:hover {
    background: linear-gradient(200deg, rgba(58,180,177,1) 21%, rgba(29,253,217,1) 79%);
    color: white;
}
.private_container:hover {
    background: linear-gradient(200deg, rgba(58,180,177,1) 21%, rgba(29,253,217,1) 79%);
    color: white;
}
.logo_container img {
    width: 35px;
    border-radius: 50%;
}
.dropdown {
    background-color: #2c3e50;
    margin-top: 7px;
    margin-right: 15px;
    display: none;

}
.dropdown li {
    display: block;
    padding: 10px;
    border-bottom: 1px solid black;
    color:  white;
    z-index: 999;
}
.dropdown li:hover {
    box-shadow: 0 0 10px #2c3e50, 0 0 40px #2c3e50, 0 0 80px #2c3e50;
}

main{
  margin:0;
  padding:0;
}
<nav class="onio_nav">
    <ul class="onio_item_left">
        <li class="onio-item">
            <div class="bars_container">
                <i class="fa fa-bars"></i>
            </div>
        </li>
    </ul>
    <ul class="onio_item_right">
        <li class="onio-item px">
            <div class="private_container px">
                <i class="fa fa-envelope" class="envelope"></i>
            </div>
        </li>
        <li class="onio-item px">
            <div class="private_container px">
                <i class="fa fa-globe" style="padding-left: 9px;"></i>
            </div>
        </li>
        <li class="onio-item px">
            <div class="private_container px">
                <i class="fa fa-headphones"></i>
            </div>
        </li>
        <li class="onio-item px">
            <div class="logo_container">
                <img src="default_images/default_avatar.png" />
            </div>  
        </li>
        <div class="dropdown">
            <ul>
                <li>
                    <i class="fa fa-user"></i> My Profile
                </li>
                <li>
                    <i class="fa fa-user"></i> My Profile
                </li>
            </ul>
        </div>
    </ul>   
</nav>
<main>
  sdsd
</main>
<nav class="onio_nav">

</nav>

答案 3 :(得分：0)

仅在这种情况下，才会出现您描述的情况。即使高度超过1像素，它也会阻止左侧的文本。 enter image description here

相关问题
最新问题