Question 246510 in Html Question posted in
Some basic documentation can be found here.

Html – how do i make text in nav bar not stack on eachothet?

I want to put the text "Portfolio-updates" in one line.
webpage

body {
  margin: 0;
  background-color: rgb(251, 255, 216);
}

.header {
  width: 1920px;
  margin: auto;
  margin-top: auto;
}

.nav {
  width: 1920px;
  background-color: rgb(156, 156, 156);
  margin: auto;
  overflow: auto;
  margin-top: -10px;
  text-align: center;
}

ul {
  display: flex;
  margin: auto;
  padding: 0;
  list-style: none;
  display: inline-block;
}

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

ul li a {
  color: white;
  width: 125px;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-family: 'Times New Roman', Times, serif;
}
<!DOCTYPE html>
<html>
<head>
  <title>Rutger Portfolio</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
  <div class="header">
    <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920" width="1920">
  </div>

  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Over mij</a></li>
      <li><a href="#">Projecten</a></li>
      <li><a href="#">Portfolio-updates</a></li>
      <li><a href="#">Archief</a></li>
    </ul>
  </div>
</body>

</html>

i tried text-align center, and searching on internet but i don’t really know what to search.
It’s probbably a simple thing that i just overlook but if someone can take 1 min of there day to help me i would appricate it. (also english is not my native langue so sorry for any spelling mistakes.)

Tags:

2

Answers


  1. 0

    hi i saw your code and i try it and its the result :

    body {
  margin: 0;
}

.nav {
  background-color: rgb(156, 156, 156);
  text-align: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center; /* Center the items horizontally */
}

    enter code here

ul li {
  list-style-type: none;
}

ul li a {
  color: white;
  text-decoration: none;
  padding: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-family: "Times New Roman", Times, serif;
}

    i changed this things :
    I made a few changes to your CSS code to achieve the desired result:

    Removed the fixed width on .nav: Previously, you had set a fixed width of 1920px for the .nav container. I removed this fixed width to make the navigation bar responsive to different screen sizes.

    Added justify-content: center; to ul: By adding this CSS property to the ul element,

    it horizontally centers the list items within the .nav container. This ensures that

    all list items stay on the same line and are centered, regardless of the screen width.

    These changes should help you achieve a navigation bar where all list items remain in a single line and are centered horizontally.

    i hope i could aid you
    happy coding.

    Login or Signup to reply.
  2. 0

    add this code in you css
    or add width here

    ul li a{
    white-space: nowrap;
    /*width:150px*/ //if needed
}

    Your CSS

    body {
  margin: 0;
  background-color: rgb(251, 255, 216);
}

.header {
  width: 1920px;
  margin: auto;
  margin-top: auto;
}

.nav {
  width: 1920px;
  background-color: rgb(156, 156, 156);
  margin: auto;
  overflow: auto;
  margin-top: -10px;
  text-align: center;
}

ul {
  display: flex;
  margin: auto;
  padding: 0;
  list-style: none;
  display: inline-block;
}

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

ul li a {
  color: white;
  width: 125px;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 15px;
  text-transform: uppercase;
  font-size: 15px;
  white-space: nowrap;
  font-family: 'Times New Roman', Times, serif;
}

    your HTML

    <!DOCTYPE html>
<html>
<head>
  <title>Rutger Portfolio</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
  <div class="header">
    <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920" width="1920">
  </div>

  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Over mij</a></li>
      <li><a href="#">Projecten</a></li>
      <li><a href="#">Portfolio-updates</a></li>
      <li><a href="#">Archief</a></li>
    </ul>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search