CODEWITHSUNDEEP
htmlcss
Maksym Kasza
Maksym Kasza

Reputation: 63

How do i make text be inline

I'm trying to make a menu for a website and the text goes underneath when it has two words, like this I don't know why this happens but I've been trying to fix it, but I don't have a clue how to do it.

This is the code 

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

I'm trying to make a menu for a website and the text goes underneath when it has two words, like this I don't know why this happens but I've been trying to fix it, but I don't have a clue how to do it.

Upvotes: 1

Views: 704

Answers (1)

dyd
dyd

Reputation: 54

Try adding white-space: nowrap; This will prevent breaking the words if am understanding correct what you are trying to achieve.

Upvotes: 2

Related Questions