[英]Text padding is not working in floated div
Okay so I have a floated div, within it I have a unorganised list.好的,所以我有一个浮动的 div,在其中我有一个无组织的列表。
<div class="navigation-nav" id="navigation-nav">
<ul class="navigation-list">
<li class="navigation-item"><a class="navigation-link current" href="#">Home</a></li>
<li class="navigation-item"><a class="navigation-link" href="#about">About</a></li>
<li class="navigation-item"><a class="navigation-link" href="projects.html">Projects</a></li>
<li class="navigation-item"><a class="navigation-link" href="#collage">Collage</a></li>
</ul>
</div>
Now if I try to change the padding or margin on either navigation-item or navigation-link it will add either a padding (which is what I want) or a margin only the x-axis, so left or right.现在,如果我尝试更改导航项或导航链接上的填充或边距,它将添加填充(这是我想要的)或仅x 轴的边距,因此向左或向右。 I want to add horizontal padding.
我想添加水平填充。 I have tried adding in a wrapper - like this:
我试过添加一个包装器 - 像这样:
<div class="navigation-nav" id="navigation-nav">
<div class="navigation-wrapper">
<ul class="navigation-list">
<li class="navigation-item"><a class="navigation-link current" href="#">Home</a></li>
<li class="navigation-item"><a class="navigation-link" href="#about">About</a></li>
<li class="navigation-item"><a class="navigation-link" href="projects.html">Projects</a></li>
<li class="navigation-item"><a class="navigation-link" href="#collage">Collage</a></li>
</ul>
</div>
</div>
But that did not work.但这没有用。 Here is all the CSS:
这是所有的CSS:
.navigation-nav {
right: 0;
float: right;
width: 50%;
text-align: right;
}
.navigation-wrapper {
float: none;
overflow: visible;
}
.navigation-list {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.navigation-item {
display: inline;
padding: 1em;
}
Try adding padding to the navigation wrapper: https://www.w3schools.com/css/css_padding.asp尝试向导航包装器添加填充: https : //www.w3schools.com/css/css_padding.asp
.navigation-wrapper {
float: none;
overflow: visible;
padding: 2em 0 0 0;
}
The main issue is that display: inline;
主要问题是
display: inline;
eliminates your ability to properly adjust box model items: border, margin, padding.消除了您正确调整框模型项目的能力:边框、边距、填充。 You can use
display: inline-block;
您可以使用
display: inline-block;
to get you what you want.得到你想要的。
I took the liberty to do some cleanup.我冒昧地做一些清理工作。 It is a matter of opinion, but my preference for best practice is to avoid too much markup when CSS targeting can handle finding the elements without much help...
这是一个见仁见智的问题,但我对最佳实践的偏好是当 CSS 定位可以在没有太多帮助的情况下找到元素时避免过多的标记......
HTML HTML
<nav> // using HTML 5 semantic tag
<ul>
<li><a class="current" href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="#collage">Collage</a></li>
</ul>
</nav>
CSS CSS
body {
margin: 0;
}
nav {
float: right;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
nav li {
display: inline-block;
margin: 0;
}
nav a {
// within the inline-block parent, it's best practice to
// apply any padding to the <a> tag so its click area
// is much easier for the user to find and click
display: block;
padding: 1em;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.