Question

大家好，

我正在尝试拉伸导航栏，以便链接在浏览器窗口之间均匀分布，而不是彼此相邻。我希望这是响应而不是固定。

我的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; 
}

我尝试了什么

我几乎尝试过所有事情。我通过调整填充设置实现了这种行为，但是这在窗口大小上显然不一致。此外，我看到了一个解决方案，将navbar-links设置为table，将 ul 元素设置为table-row＆amp;将 li 元素添加到表格单元格但是这在我的情况下不起作用，我不知道为什么。

如何实现这种行为？

的jsfiddle
https://jsfiddle.net/uoxgLvbL/

Answer 1

我认为你在桌子/桌子的正确轨道上，你只是有点偏离。

我在这里做的是将徽标和导航视为表/表格单元格，然后将导航ul本身也视为表格/表格单元格。

确保在使用table / table-cell时，不要使用会导致它无效的浮动。

我没有处理图像，而是在图像周围创建了一个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/

拉伸导航栏

1 个答案: