Concerns Regarding Spacing Between Words

Attempting to recreate Google's homepage as a way to enhance my basic skills. Adding word spacing to the links in the navbar (Gmail & Images) seems to be causing some issues. Any guidance on where I might be mistaken?

Noticed that list-style-type: none; isn't making any changes either.

html {
  width: 100%;
  padding: 0;
  margin: 0;
}

.mainSection {
  text-align: center;
  margin-top: 10%;
}

input {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1%;
  border: none;
  padding: 10px;
  width: 500px;
  border: 1px solid lightgray;
  outline: none;
  font-size: 20px;
  font-weight: lighter;
  box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}

button {
  outline: none;
  margin-top: 3%;
  display: inline-block;
  width: 150px;
  height: 35px;
  border: 1px solid #eaeaea;
  outline: none;
  background-color: #f2f2f2;
  color: #636363;
  font-weight: bold;
}

.divider {
  width: 10px;
  display: inline-block;
}

.nav-wrapper {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav-wrapper a {
  float: right;
  list-style-type: none;
  word-spacing: 30px;
}
<nav>
  <div class="nav-wrapper">
    <a href="#" class="gmail">Gmail</a>
    <div class="dividerTwo"></div>
    <a href="#" class="images">Images</a>
    <!-- Add sign-in button here -->
    </ul>
  </div>
</nav>
<main>
  <div class="mainSection">
    <img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
    <div id="search">
      <input type="text">
      <button id="Search" href="#">Google Search</button>
      <div class="divider"></div>
      <button id="Lucky" href="#">I'm Feeling Lucky</button>
    </div>
  </div>
</main>

htmlcss

Answer №1

padding-left is the perfect solution in this case. 

.nav-wrapper a {
    float: right;
    order: 1;
    text-decoration: none;
    padding-left: 10px;
}


<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Google</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

      html {
        width: 100%;
        padding: 0;
        margin: 0;     
      }

      .mainSection {
        text-align: center;
        margin-top: 10%;  
      }   

      input {
        display: block;
        margin-right: auto;
        margin-left: auto;
        margin-top: 1%;
        border: none;
        padding: 10px;
        width: 500px;
        border: 1px solid lightgray;
        outline: none;
        font-size: 20px;
        font-weight: lighter;
        box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
      }

      button {
        outline: none;
        margin-top: 3%;
        display: inline-block;
        width: 150px;
        height: 35px;
        border: 1px solid #eaeaea;
        outline: none;
        background-color: #f2f2f2;
        color: #636363;
        font-weight: bold;
      }

      .divider {
        width: 10px;
        display: inline-block;
      }

      .nav-wrapper {
        margin: 0;
        padding: 0;
        overflow: hidden; 
      }   

      .nav-wrapper a {
        float: right;
        order: 1;
        text-decoration:none;
        padding-left: 10px;
      }


    </style>
  </head>

  <body>
    <nav>
      <div class="nav-wrapper">
        <ul>
          <a href="#" class="gmail">Gmail</a>
          <div class="dividerTwo"></div>
          <a href="#" class="images">Images</a>
          <!-- Add sign-in button here -->
        </ul>
      </div>
    </nav>
    <main>
      <div class="mainSection">
        <img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
        <div id="search">
          <input type="text">
          <button id="Search" href="#">Google Search</button>
          <div class="divider"></div>
          <button id="Lucky" href="#">I'm Feeling Lucky</button>
        </div>
      </div>
    </main>
  </body>

</html>

Answer №2

Not Necessary:

  • No need for word spacing
  • <div class="dividerTwo"></div>
    .


Just do this:

  • Add some padding around .nav-wrapper a
.nav-wrapper a {
  float: right;
  list-style-type: none;
  padding:0 .5em;
}

Answer №3

When faced with this situation, it is recommended to utilize the margin CSS property over the word-spacing property. The final CSS rule should be written as:

.nav-wrapper a {
   float: right;
   list-style-type: none;
   margin-left: 15px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a personalized cursor transition with CSS styling

I have an unordered list (ul) with items on each list item (li) having a different cursor. While it works fine, the transition is not smooth. Is there a way to make the transition from the default cursor to a custom image smoother? HTML <section class ...

htmlcss

Tips on positioning four div elements inside of another div using the float property

Struggling to align 4 divs side by side within a parent div with a width of 100%. Each child div has a width of 25% without any margin or padding, but they are not displaying correctly! Here is the code snippet... <div id="bottomsections"> < ...

csshtml

What is the best way to rotate an SVG path element without it spinning in circles?

I am trying to rotate 3 paths in an SVG continuously, but I am having trouble getting them to rotate properly. The code I used worked fine with a single path SVG, but not with this one. I also have several others that I would like to rotate in a fixed po ...

csssvgsvg-animate

Implement CSS styling within XML responses in jQuery UI autocomplete

Can you apply a different CSS class to a specific part of the label in the XML response? Currently, the label value is: label: $( "name", this ).text() + ", " + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ) + ", " + $( "countryCode" ...

jquerycssxmluser-interfaceautocomplete

Disable page scrolling while enabling scrolling for specific elements with overflow using JQM

Is there a way to stop the page from scrolling on a jQuery Mobile page while still allowing a specific element with overflow set to scroll to be scrolled by the user? The challenge is that the length of the page may vary slightly, exceeding 100% on differe ...

javascriptjqueryhtmlcssjquery-mobile

Execute the function when the control becomes visible

Currently, I possess an input control: <input id="someID" class="form-control" type="text" name="SomeData" data-ng-model="vm.SomeData"> I have a requirement to set the initial value of vm.SomeData upon user scrolling down to this control. As a begi ...

htmlangularjs

The unboundStoryFn function returned nothing from the render, indicating that a return statement is likely missing. To render nothing, simply return null

While trying to test a react search component using storybook, I encountered an error called unboundStoryFn. The error message indicates that unboundStoryFn(...): Nothing was returned from render. This usually means a return statement is missing. Or, to re ...

javascripthtmlreactjsstorybook

What is the optimal way to dynamically adjust the height of a DOM element using JQuery?

Is there a difference between using $('#element').css('height', 10) and $('#element').height(10) to change the height of an element? Which method is considered best practice? ...

jqueryhtml

I desire the div to display based on the conditions set in the PHP file

Hi, I am looking to display the div with ID "msga" when a certain condition is met and show the div with ID "msgb" when another condition is met. Here is my PHP code: if(isset($_POST['aa'])) { echo "a"; } if (isset($_POST['bb']))) { ...

phpjqueryhtmlajax

Preserving the original height of an element while its content undergoes modification

I have a unique image display setup where the main image is shown in full size to the left, while all other gallery images are displayed as thumbnails to the right. Here's how it's structured: <div class='col-md-7'> <img s ...

jqueryhtmlcssangularjstwitter-bootstrap

Linear-gradient() not responding to 2-second transition

Hey there, I'm working on a div element that has a linear-gradient(). When hovering over the div, it should take 2 seconds to expand to a width of 200px and add blue and green to the linear-gradient(). However, currently, the blue and green are bein ...

htmlcss

What is the best way to align content in the middle of a containing div?

I am struggling with centering text and images inside a div that is 190px x 190px. Despite searching on various platforms, including SO and Google, I have not found a simple solution. Can someone please provide guidance on the easiest way to achieve verti ...

csshtml

Tips for creating seamless image transitions using a toggle button

My transition effect is working smoothly, but I am having trouble setting it up for the image. How can I resolve this issue? I attempted the following: var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-o ...

javascripthtmlcsscss-transitions

Tips for designing your own personalized card

I'm struggling to create a card using html and css. Can someone assist me? Below are the codes I have so far: <body> <div id=“container”> <img src=“test.jpeg” /> <span>title 1</span> <span&g ...

htmlcsscard

Is Material-ui's sx feature able to produce optimized utility classes like tailwindcss?

When utilizing Tailwind CSS, it is compiled in the following manner: <div class="font-bold"></div> <div class=".font-bold"></div> This compiles to: .font-bold{ font-weight: bold; } So... when using SX like thi ...

htmlcssmaterial-uivitemui-x

How can we stop a form from being submitted when the input field is

Similar Question: How to prevent submitting the HTML form’s input field value if it empty <?php include '../core/init.php'; if(isset($_POST['nt']) && isset($_POST['ntb'])){ mysql_query("INSERT INTO `pos ...

phpjavascriptjqueryhtmlcss

Tips for enlarging an image element without causing the header to expand

I'm looking to enhance a logo image within a header element by expanding it on hover or creating a pulse effect. I thought of increasing the max-width and adding a transition for simplicity. However, my main concern is how to make only the img element ...

htmlcssbootstrap-4

Is there a way to arrange an HTML list in this specific manner using CSS or JavaScript?

I need to arrange a list of items in columns with 5 rows each, as shown in the attached image. This list is generated dynamically using an SQL query with a loop on the li tag. I am looking for a solution to order the list in this way using javascript or ...

javascriptcsshtml-lists

Javascript animations failing to run sequentially

I am working on a circular design made up of 12 arc segments and would like to create a smooth transition from the start pattern to the end pattern for the user to view. There will be multiple start and end patterns to showcase. Check out my current code ...

javascriptjqueryhtmlcss

Assigning a value to data-ng-model in JavaScript

I am facing a challenge in setting the data-ng-model attribute of an HTML input field using JavaScript. I have attempted to do it like this: element.data-ng-model = "..."; However, I realized that it doesn't work due to the presence of dashes. So, I ...

javascripthtmlangularjs