javascript - 拉伸(stretch)导航栏

Question

大家好，

我正在尝试拉伸(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/

Answer 1

我认为您在表格/表格单元格方面走在了正确的轨道上，只是有点偏离。

我在这里所做的是将 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;

} 

JSFiddle Example

一些媒体查询:

https://jsfiddle.net/uoxgLvbL/2/