CODEWITHSUNDEEP
htmlcss
Seth.L
Seth.L

Reputation: 23

Why isn't word-spacing working when specified?

I have my list now reading from left to right instead of reading row by row but now how do I space the words out as they are too close together? I'm trying to have space in between texts and tried doing word-spacing but it wouldn't change anything. I tried doing word-spacing in both #menu id and inside li{} but it still didn't work. 

<body>
    <div id="container">
        <div id="nav"></div>
        <img src="...">
        <h1>IndieForwardMusic</h1>

        <ul id="menu">
            <li>Home</li>
            <li>About</li>
            <li><a href="..."</a></li>
            <li>Contact</li>
        </ul>

    </div>
</body>



#menu {
  position: absolute;
  list-style-type: none;
  margin: 0;
  color: white;
  font-size: 38px;
  top: 10px;
}

li{
  float: left;
  word-spacing: 30px;
}

Upvotes: 2

Views: 57

Answers (2)

Twometer
Twometer

Reputation: 1721

Do not use word-spacing as in each li there is only one word. If you want to space the lis then use the following CSS

li {
    margin-left: 30px;
    margin-right: 30px;
}

Upvotes: 0

mozkomor05
mozkomor05

Reputation: 1427

Just set some margin.

#menu li {
margin:0 20px;
}

Upvotes: 2

Related Questions