Question

所以我最近开始在我的空闲时间创建一些网页，我想知道如何创建一个通常与其下一个元素的距离大约为95像素的列表，以自动检测您使用的窗口是否变小从而将距离减小到一定的最小值。另一个解决方案是强制网页的最小宽度，但我也找不到办法。对我来说当前的问题是我有2个标题，每当我使页面足够小时，它就会创建一个新行，第2个标题为1个字。

HTML

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Nunito|PT+Serif+Caption|Heebo" rel="stylesheet">
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
    <div class='header'>
        <h1>This is my homepage welcome!</h1>
        <nav id='nav'>
            <ul>
                <li>
                <a href='#'>My Life</a>
                </li>
                <li>
                <a href='#'>My Skills</a>
                </li>
                <li>
                <a href='#'>My Hobbys</a>
                </li>
                <li>
                <a href='#'>My Qualifications</a>
                </li>
              </ul>
        </nav>
    </div>
    <div class='container'>

    </div>
</body>
</html>

CSS

    *{
    margin: 0;
    padding: 0;
    border: 0;
}

.header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #222;
    color: white;
    text-align:center;
} 

h1{
    font-family: 'Heebo', sans-serif;
    text-align: center;
    text-transform: uppercase;
}

#nav {
    height: 25px;
    line-height: 25px;
    width: 100%;
    background: LightGrey;
    position: absolute;
}

#nav ul li {
    display: inline-block;
    list-style: none;
}

#nav ul li a {
    color: grey;
    font-family: 'Heebo', sans-serif;
    text-decoration:none;
    margin: 50 ;
    width: 500px;
}

.container{
    height: 500px;
    width: 100%;
    background-image: url("https://wallpaperscraft.com/image/mountain_lake_landscape_reflection_86115_3840x2400.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Answer 1

链接是inline元素。添加display: inline-block会使他们拥有盒子模型：

＆＃13;

a {
  display: inline-block;
  width: 100px;
  line-height: 100px;
  background: #ccf;
  text-align: center;
}

＆＃13;

<a href="#">Link</a>

＆＃13;

如何在网页上强制执行宽度？

1 个答案: