大家好,
我正在尝试拉伸(stretch)我的导航栏,以便链接在浏览器窗口之外均匀分布,而不是彼此相邻。我希望这是响应而不是固定的。
我的 HTML
<div class="navbar-wrapper">
<img src="./images/R_medum.jpg" class="nav-image" alt=""/>
<div class="navbar-links">
<ul>
<li><a href="#" title="There is no place like it">127.0.0.1</a></li>
<li><a href="https://google.com">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#"> YouTube </a></li>
</ul>
</div>
</div>
我的 CSS
.navbar-wrapper {
width:100%;
display: inline;
float: left;
}
.navbar-wrapper img {
float: left;
}
#navbar {
margin: 0;
padding: .3em 0 .3em 0;
display: inline;
float: left;
}
.navbar-links ul {
list-style: none;
margin: 50px;
padding: 0;
display: table;
float: left;
text-align: justify;
width: calc(10% -115px);
}
.navbar-links li {
vertical-align: center;
padding: 0;
display: table-cell;
text-align: center;
float: left;
white-space: nowrap;
width: calc(calc(100 - 115px) / 4);
}
.navbar-links ul a{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: 1.5em;
background-color: black;
color: orange;
}
.navbar-links ul a:visited{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-style: italic;
font-size: 1.5em;
color: green;
}
.navbar-links ul a:active{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
color: white;
}
.navbar-links ul a:hover{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: 1.8em;
color: #f6f0cc;
background-color: #227755;
}
我尝试过的
我几乎什么都试过了。我通过调整填充设置实现了这种行为,但是这显然在窗口大小之间并不统一。我还看到了一个解决方案,将导航栏链接设置为表格,将 ul 元素设置为表格行,并将 li 元素到表格单元格,但这在我的情况下不起作用,我不确定为什么。
如何实现这种行为?
JSFIDDLE
https://jsfiddle.net/uoxgLvbL/
最佳答案
我认为您在表格/表格单元格方面走在了正确的轨道上,只是有点偏离。
我在这里所做的是将 Logo 和导航视为表格/表格单元格,然后将导航本身也视为表格/表格单元格。
确保在使用表格/表格单元格时,不要使用 float ,这会使它变得毫无用处。
我没有处理图像,而是围绕图像创建了一个 div 来实现需求:
<div class="navbar-wrapper">
<div class="nav-image">
<img src="http://placehold.it/110x117" class="" alt=""/>
</div>
<div class="navbar-links">
<ul>
<li><a href="#" title="There is no place like it">127.0.0.1</a></li>
<li><a href="https://google.com">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#"> YouTube </a></li>
</ul>
</div>
</div>
CSS
body {
background-color: black;
}
.navbar-wrapper {
width:100%;
display:table;
}
.navbar-wrapper img {
display:block;
}
.nav-image { display:table-cell; }
#navbar {
margin: 0;
padding: .3em 0 .3em 0;
display:table-cell;
}
.navbar-links { display:table-cell; vertical-align:middle; }
.navbar-links ul {
list-style: none;
margin: 0;
padding: 0;
display: table;
text-align: justify;
width: 100%;
height:100%;
}
.navbar-links li {
vertical-align:top;
padding: 0;
display: table-cell;
text-align: center;
white-space: nowrap;
}
一些媒体查询:
关于javascript - 拉伸(stretch)导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31216850/