How do I get my text to be next to each other not on top-CodePudding

I want the google form text to be right next to each other not on top of each other. here is a picture. https://i.stack.imgur.com/Mf6dk.png. I also need help fix my hover over the text feature. I added an orange hover for when you go over the text it shows where you are but when you do it does not fit the whole div. Here is a picture https://i.stack.imgur.com/IxMcd.png

Here is my code:

body {
  margin: 0;
  padding: 0;
  background-color: rgb(187, 190, 4);
  font-family: Arial;
}

.navBAr,
ul {
  list-style: none;
  background: #401f99;
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: none;
}

.navBar,
li {
  display: inline-block;
}

.navbar,
a {
  text-decoration: none;
  color: #fff;
  width: 100px;
  display: block;
  padding: 25px 20px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}

.navBar,
a:hover {
  background: orange;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Movie And Tv Shows Google Form Recomendations</title>
    <link rel="stylesheet" href="background.css" />
  </head>

  <body>
    <div id="navBar">
      <ul>
        <li><a href="index.html">HomePage</a></li>
        <li><a href="/mainPages/googleForm.html">Google Form</a></li>
        <li><a href="/mainPages/myMovies.html">Movies</a></li>
        <li><a href="/mainPages/myTvShows.html">Shows</a></li>
        <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
        <li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
      </ul>
    </div>
  </body>
</html>

CodePudding user response：

The "Google Form" string is wrapping because you don't have enough space for it and have CSS attribute white-space set to the default normal. Override the default to get the desired with white-space: nowrap;. More on CSS white-space here: https://www.w3schools.com/cssref/pr_text_white-space.asp

body {
  margin: 0;
  padding: 0;
  background-color: rgb(187, 190, 4);
  font-family: Arial;
}

.navBAr,
ul {
  list-style: none;
  background: #401f99;
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: none;
}

.navBar,
li {
  display: inline-block;
}

.navbar,
a {
  text-decoration: none;
  color: #fff;
  width: 100px;
  display: block;
  padding: 25px 20px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  /* added the below */
  white-space: nowrap;
  
}

<div id="navBar">
  <ul>
    <li><a href="index.html">HomePage</a></li>
    <li><a href="/mainPages/googleForm.html">Google Form</a></li>
    <li><a href="/mainPages/myMovies.html">Movies</a></li>
    <li><a href="/mainPages/myTvShows.html">Shows</a></li>
    <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
    <li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
  </ul>
</div>

CodePudding user response：

Use white-space: nowrap; CSS property. Refernec

body {
  margin: 0;
  padding: 0;
  background-color: rgb(187, 190, 4);
  font-family: Arial;
}

.navBAr,
ul {
  list-style: none;
  background: #401f99;
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: none;
}

.navBar,
li {
  display: inline-block;
}

.navbar,
a {
  text-decoration: none;
  color: #fff;
  width: 100px;
  display: block;
  padding: 25px 20px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  white-space: nowrap; // add this
}

.navBar,
a:hover {
  background: orange;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Movie And Tv Shows Google Form Recomendations</title>
  <link rel="stylesheet" href="background.css" />
</head>

<body>
  <div id="navBar">
    <ul>
      <li><a href="index.html">HomePage</a></li>
      <li><a href="/mainPages/googleForm.html">Google Form</a></li>
      <li><a href="/mainPages/myMovies.html">Movies</a></li>
      <li><a href="/mainPages/myTvShows.html">Shows</a></li>
      <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
      <li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
    </ul>
  </div>
</body>

</html>

CodePudding user response：

There wasn't enough room in the containers for the text to span, so it was wrapping. Here is a solution that instead converts the ul to a flex container to make the items go in a row. After that, we can simply remove the li width and it will flow with the padding. If you do want the items to be wider, just increase the horizontal padding.

body {
  margin: 0;
  padding: 0;
  background-color: rgb(187, 190, 4);
  font-family: Arial;
}

.navBAr,
ul {
  list-style: none;
  background: #401f99;
  padding: 0;
  width: 100%;
  display: flex;
  margin: 0;
  text-align: center;
  list-style: none;
}

.navBar,
li {
  
}

.navbar,
a {
  text-decoration: none;
  color: #fff;
  display: flex;
  padding: 25px 20px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}

.navBar,
a:hover {
  background: orange;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Movie And Tv Shows Google Form Recomendations</title>
    <link rel="stylesheet" href="background.css" />
  </head>

  <body>
    <div id="navBar">
      <ul>
        <li><a href="index.html">HomePage</a></li>
        <li><a href="/mainPages/googleForm.html">Google Form</a></li>
        <li><a href="/mainPages/myMovies.html">Movies</a></li>
        <li><a href="/mainPages/myTvShows.html">Shows</a></li>
        <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
        <li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
      </ul>
    </div>
  </body>
</html>