Question

正如您在下面看到的，如果屏幕足够宽，则列表可以完美地工作，但是，当屏幕变短时，水平列表当然不适合屏幕，因此它将中断到下一行。

列表的断开变为：

如果发生此类事件，如何增加链接元素之间的间距？

完整的代码如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>HassanAlthaf.com</title>

    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div class="container-fluid">
    <div class="row align-items-center justify-content-center page">
        <div class="row col-8">
            <div class="row col-12 header">
                <h1>HassanAlthaf<span class="highlight">.com</span></h1>
                <p>An undergraduate student looking to grow in a professional environment to take off his career as a Software Developer.</p>
            </div>

            <ul class="links">
                <li class="link">
                    <a href="#">Facebook</a>
                </li>
                <li class="link">
                    <a href="#">LinkedIn</a>
                </li>
                <li class="link">
                    <a href="#">GitHub</a>
                </li>
                <li class="link">
                    <a href="#">Instagram</a>
                </li>
                <li class="link">
                    <a href="#">StackOverflow</a>
                </li>
                <li class="link">
                    <a href="#">Email</a>
                </li>
            </ul>
        </div>
    </div>
</div>


    <script type="text/javascript" src="/node_modules/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script type="text/javascript" src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

main.css：

@font-face {
    font-family: 'SF-Pro';
    src: url("../fonts/SF-Pro-Display-Bold.otf");
    font-weight: bold;
}

@font-face {
    font-family: 'SF-Pro';
    src: url("../fonts/SF-Pro-Display-LightItalic.otf");
    font-style: italic;
}

@font-face {
    font-family: 'SF-Pro';
    src: url("../fonts/SF-Pro-Display-Regular.otf");
    font-weight: normal;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box !important;
}

.page {
    background: #000000;
    height: 100vh;
}

.links {
    width: 100%;
    list-style: none;
    text-align: center;
}

.link {
    display: inline;
    width: 100%;
    text-align: center;
}

.link a {
    background: #FFFFFF;
    font-family: "SF-Pro", sans-serif;
    font-weight: normal;
    color: #2196f3;
    padding: 10px;
}

.header {
    width: 100%;
}

.header h1 {
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-family: 'SF-Pro', sans-serif;
    font-weight: bold;
    font-size: 55px;
}

.header p {
    width: 100%;
    text-align: center;
    font-style: italic;
    font-family: 'SF-Pro', sans-serif;
    color: #FCFCFC;
}

.highlight {
    color: #2196f3;
    font-size: 20px;
}

Answer 1

可能的解决方案是使用Flexbox，如下所示：

.links {
    width: 100%;
    list-style: none;
    text-align: center;

  // Add this lines
  display: flex; 
  justify-content: center;
  flex-wrap: wrap;
}

.link {
    display: inline;
    width: auto;
  height: auto;
    text-align: center;

  // And this line
  margin: 20px 5px;
  
}

CodePen Demo

Answer 2

只需为您的.link类显示link{display:inline-block}，即可设置边距。您必须删除设置为width:100%的{{1}}，这就像将它们设置为显示块并覆盖.link一样。完成后，您可以在display:inline-block上插入margin:15px 0px，以使演示效果更好。

水平行内无序列表溢出之间的间距

2 个答案: