Question

在响应式设计方面，可以选择使用u l和div元素。这个问题具体是关于导航栏。

我使用了ul - 以及许多其他开发人员 - 然后发现对于某些导航行为，使用display: flex属性要容易得多，如下所示：

<div class="navbar">
    <div><a href="#">LOGIN</a></div>
    <div><a href="#">REGISTER</a></div>
    <div><a href="#">BASKET</a></div>
</div>

CSS：

.navbar {
    display: flex;
    justify-content: space-between;
    border: solid 1px;
    border-style: dotted;
    font: bold 1.2em/45px "Times New Roman", Georgia, Serif;
    text-decoration: none;
    background-color: black;
}

.navbar a {
    text-decoration: none;
    font: bold 1.2em/45px "Times New Roman", Georgia, Serif;
    padding: 20px;
    color: white;
}

使用这种方法有不利之处吗？

Answer 1

这两种方法都没有任何缺点。

如果您正在考虑使用CSS或JavaScript可以执行的操作，则使用<ul>或<div>元素将没有任何区别。

唯一真正的问题是浏览器支持。如果您查看this page，您会看到IE9或更早版本中不支持display: flex。 IE中仍然没有完全支持它，因为存在大量的错误。

以下是Flexboxes已知问题的引用（来自页面）：

当使用最小高度时，IE 11不会正确地垂直对齐项目

如果父级使用display：flex并且设置了tabindex
，则IE 11会错误地聚焦子元素
在IE 10中，设置-ms-flex-flow：换行不会换行，除非在子元素上设置了display：inline-block。

IE11不会包含很长的文字段落

IE11不会在伪元素上应用flexbox。

Firefox不支持按钮元素中的Flexbox

在Chrome和Safari中，（非弯曲）儿童的高度无法以百分比形式识别。但Firefox和IE识别和扩展   孩子们基于百分比高度。

在IE10中，flex的默认值为0 0 auto，而不是最新规范中定义的0 1 auto。

在IE10和IE11中，带有display：flex和flex-direction：列的容器将无法正确计算其弯曲度   如果容器具有最小高度但没有明确的，则为儿童的尺寸   身高属性。

如您所见，大多数问题都与IE10和IE11有关。

由于您没有使用按钮，因此Firefox问题并不重要。在其他浏览器中唯一可能涉及的是Chrome和Safari错误，其大小设置为百分比。

因此，总而言之，使用<ul>可能是您最安全的选择。但是，如果您不关心浏览器支持，请根据需要使用display: flex。

另外，请查看Flexbugs。它包含许多Flexbox问题的解决方法

Answer 2

下行将是它无法在Internet Explorer和一些移动浏览器上运行......您应该使用bootstrap.css导航栏检查您的代码，因为它也是响应

使用ul或div与CSS属性flex为响应式网站

2 个答案: