Question

我试图为一个网站制作一个菜单，当它有两个单词时，文字就在下面，like this我不知道为什么会这样，但我一直在尝试解决它，但我不知道如何做到这一点。

这是代码

＆＃13;

body
{
    margin: 0;
    padding: 0;
    background: #262626;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
}

.menu
{
    position: absolute;
    width: 100%;
    text-align: center;
    text-transform: lowercase;
    left: 50%;
    top: 30%;
    transform: translate(-50%);
}

ul
{
    position: absolute;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(4, 1fr);
    left: 50%;
    transform: translate(-50%);
}

ul li
{
    list-style: none;
}

ul li a
{
    display: block;
    padding: 100px;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    transition: .5s;
    color: #262626;
    background: #e2e2e2;
}

＆＃13;

<html>
    <head>
        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>


    <body>
        <div class="menu">
			<h1>kaszam</h1>
            <ul>
                <li><a href="#aboutMe">about me</a></li>
                <li><a href="#pcSpecs">pc specs</a></li>
                <li><a href="#accounts">accounts</a></li>
                <li><a href="#usefulLinks">useful links</a></li>
            </ul>
        </div>

    </body>
</html>

＆＃13;

我试图为一个网站制作一个菜单，当它有两个单词时，文字就在下面，like this我不知道为什么会这样，但我一直在尝试解决它，但我不知道如何做到这一点。

Answer 1

尝试添加white-space: nowrap;如果您理解正在尝试实现的目标，这将有助于打破这些词语。

如何使文本内联

1 个答案: