Introduce intervals between each word

I'm currently working on a project to create a front-end design inspired by the Google homepage. I am facing an issue with adjusting the spacing of the navigation bar to match the original Google page layout. In my code snippet, the current spacing looks like this: About Store Images Sign in, but I aim to achieve something more aligned with: 

About  Store                                 Images Sign in
.

html{
    height: 100%;
    min-height: 100%;
}
a{
    display: inline-block;
    padding: 15px;
    color: black;
} 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <link href="styles.css" rel="stylesheet">
    </head>

    <!-- Other HTML code for the project -->

If anyone has any suggestions or guidance on how to address this spacing issue, I would greatly appreciate your input.

htmlcss

Answer №1

Check out this solution that utilizes display: flex and justify-content: space-between;

html{
    height: 100%;
    min-height: 100%;
}
a{
    display: inline-block;
    padding: 15px;
    color: black;
} 
#header {
    display: flex;
    justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <link href="styles.css" rel="stylesheet">
    </head>
    <body>
        <div id="header">
            <div>
                <a href="#" id="about">About</a>
                <a href="#" id="store">Store</a>
            </div>
            <div>
                <a href="#" id="images">Images</a>
                <a href="#" id="sign-in">Sign in</a>
            </div>
        </div>
        <div id="main">
            <img src="google.png" alt="img" width="auto">
            <form action="https://google.com/search">
                <input type="text" name="q">
                <br>
                <input type="submit" value="Google Search">
                <input type="submit" name="btnI" value="I'm Feeling Lucky">
            </form>
        </div>
        <div id="footer">
            <a href="#" id="advertising">Advertising</a>
            <a href="#" id="business">Business</a>
            <a href="#" id="how_search_works">How Search works</a>
            <a href="#" id="privacy">Privacy</a>
            <a href="#" id="terms">Terms</a>
            <a href="#" id="settings">Settings</a>
        </div>    
    </body>
</html>

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

Exploring the world of HTML, JavaScript, and baking delicious

I am looking to create a simple cookie using JavaScript in my HTML code. The JavaScript code needs to be stored in a separate file named javascript.js, and in the HTML file, I need to call a function to create and store the cookie. <head> <script ...

javascripthtml

Display/Modify HTML form

Looking for advice on how to create an interactive HTML form that displays data and allows users to edit it by clicking 'Edit' before submitting changes. Any suggestions on how to implement this functionality? ...

javascriptjqueryhtmlwebforms

Having trouble removing a DOM element with jQuery?

Hey there, I need your help with a jQuery issue I'm facing. I am currently working on cloning a div element that contains a span with a click event attached to it. The purpose of the click event is to remove the newly cloned section from the DOM. Whil ...

javascriptjqueryhtml

Using the `@import` directive within an `@if` statement in

My goal is to optimize the performance of my login page by loading only the necessary CSS. For all other pages, I want to use a single grouped CSS file that will be cached across the site. The files I am working with are: minifiedcssforloginpage.scss gro ...

cssimportsassdependenciesmixins

UTF-8 encoding experiencing issues on select Android mobile devices

Our new website, powered by Wordpress, is up and running but some users are experiencing issues with displaying Swedish special characters. It seems to be happening specifically on Android devices, regardless of the browser being used. However, I have not ...

cssencodingandroid

Form tag flooding

Recently I started using bootstrap-vue, specifically the Form-tag which is exactly what I need. However, I encountered an issue with the dropdown menu being as long as the list of options available. To illustrate, here are images showcasing the issue: Tag ...

cssbootstrap-4bootstrap-vue

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

javascriptjqueryangularjshtmldom

Adaptive grids in Bootstrap

I've been using bootstrap and I'm trying to get the items to align next to each other, but using the bootstrap columns doesn't seem to be working for me. I may be coding it incorrectly. <link rel="stylesheet" href="https://cdn.jsdelivr ...

htmlcsswebbootstrap-4

Animating the background position of a progress bar using CSS3 and Webkit

I am seeking a functional method to animate the background-position property of an HTML5 progress element in webkit/blink. HTML: <progress max="100" value="0"></progress> CSS: progress[value]::-webkit-progress-bar { -webkit-animation: mov ...

htmlcsswebkitblink

Failed HTTP request when trying to retrieve data from an external source

I am currently working on developing a web application that involves receiving an image and saving it to my device, then using that image as a link to another page. On my local machine where the web service is hosted, everything works perfectly and I rece ...

javascriptajaxhtmlhttprequest

The paragraph tag remains unchanged

I am currently working on developing a feature that saves high scores using local storage. The project I'm working on is a quiz application which displays the top 5 scores at the end, regardless of whether the quiz was completed or not. However, I&apo ...

javascriptjqueryhtmlcssajax

Title element in CSS adjusts in width but is not full width

I have a straightforward website designed for phone, tablet, and desktop screens using media queries to adjust the CSS. The challenge arises from the site being PHP-based, dynamic, and not utilizing the full width of the screen. It features two 500px-wide ...

phpcssdynamic

When an image is clicked, it enlarges and moves to the center of the screen

Hey there, I'm currently working on a project that involves allowing users to upload images. I would like the images to expand to full screen and be centered when clicked by the user. Any advice on how I can achieve this? Below is the code I have: & ...

asp.nethtml

Implementing a Jquery Switcher: A Step-by-Step Guide

I always strive to provide clear and specific details about my question. My goal is to create an Alert Box for different types of inputs, where all inputs will trigger the same alert message in the box instead of separate alerts. I attempted to implement ...

javascriptjqueryhtmlcss

Obtaining an ID from the href attribute using Selenium

Curious about working with selenium in java. In my coding project, I am dealing with multiple href links that look like this: /cms/shops/edit?id=xxx <a href="/cms/shops/edit?id=736" class="btn btn-sm btn-primary">Edit</a> <a href="/cms/s ...

javahtmlseleniumhref

JavaScript animation not functioning properly when height is set to "auto"

Can someone help me figure out why setting the height to "auto" in the code snippet below isn't working as expected? I want the DIV to adjust its size based on the content, but it's not happening. Any ideas on how to fix this issue would be great ...

javascriptjqueryhtmlcss

Populate the svg tag with a nearby image

Is there a way to fill a svg element, like a circle, with an image that users can select from their local computer using an <input type='file'/> input? I am aware of filling a svg element using a pattern: <defs> <pattern id="im ...

javascripthtmlfilesvginput

Using the HTML video tag to apply different background colors based on the individual machines being

My web application includes a video that is set to play against the same background color as the webpage. However, I am experiencing an issue where the video background appears differently on various machines using the same browser. What I would like to ac ...

htmlcssvue.jsbrowserbackground-color

Troubleshooting unexpected behavior of CSS pseudo-class selectors

Here is the scenario I'm dealing with: HTML .input { color: red; } .input:not(:disabled, :read-only):hover { color: blue; } <input class="input" type="text" value="Hello"> <div class="input">Hello</div> It's interes ...

htmlcss

Fade out the div element on either desktop or mobile devices

I have a div (fademe) that needs to be displayed whenever a user hovers the mouse over another div. The issue is that mobile browsers do not support hover events and I am struggling to find a solution that works on all devices. This is my code for deskto ...

javascripthtmljquerycss