'put spaces between links

I have two questions:

  1. When i run the code below, it shows me names of links in large form, after i reload, it is good, so what is problem?

  2. I want to put spaces between names like this:

მთავარი ბაკურიანი გუდაური ზღვა კახეთი სვანეთი ვარძია ქართლი ძველი_თბილისი

How could i do this?

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  </head>
  <style>

    #links { 
      margin: 0 auto; 
      width: 3000px; 
      font-size:70px;
      clear: both; 
      display: block;
    }
    
    #test a {
      float: right;
    }
  </style>
  <body bgcolor="blue" >
    <a href="indexE.html"><img src ='english.gif' style="float:right"  width="88" height="88"> </a>
    <a href="indexR.html"><img src ='russian.gif' alt="Russian flag" style="float:right"  width="88" height="88"/>
    <a href="index.html"> <img src="georgian.jpg"  style="float:right" width="88" height="88"/>
    <div id="links">
      <a href=" index.html " >მთავარი </a>
      <a href=" ბაკურიანი.html ">ბაკურიანი </a>
      <a href=" გუდაური.html ">გუდაური </a>
      <a href=" ზღვა.html ">ზღვა </a>
      <a href=" კახეთი.html ">კახეთი </a>
      <a href=" სვანეთი.html ">სვანეთი </a>
      <a href=" ვარძია.html ">ვარძია </a>
      <a href=" ქართლი.html ">ქართლი </a>
      <a href=" ძველი_თბილისი.html ">ძველი_თბილისი </a>
    </div>
  </body>
</html>
html


Solution 1:[1]

You could use &nbsp; for space, it is a valid HTML string for space so it'll be validated by W3C too.

Solution 2:[2]

use &nbsp; between links to get spaces

<a href=" index.html " >??????? </a>&nbsp;
<a href=" ?????????.html ">????????? </a>&nbsp;
<a href=" ???????.html ">??????? </a>

Solution 3:[3]

indexR and index need closing </a> tags. Also for spaces use &nbsp; or css margins or padding.

Solution 4:[4]

For using space in your html application use 1) Entity name

&nbsp

; Or 2) Entity Number

&#160

;

Solution 5:[5]

You can use %20 the HTML-ASCII syntax for the space character. I have found that sometimes &nbsp; doesn't work that well with links.

Solution 6:[6]

Add padding in anchor tag CSS file.

Directly applies to all anchor tag:

ul li a{ padding: 10px; }

Or if using any class then,

.classname ul li a{ padding: 10px; }

Solution 7:[7]

Though &nbsp is totally valid but do try this as this is a elegant way

       <style>
       .links
       {
       display:flex;
       align-items:center;
      justify-content:space-around;
       }
      .links a
      {
      flex:1;
      text-align:center;
      }
       </style>

      <div class="links“>
        <a href=" ??????.html ">?????? </a>
      
       <a href=" ???????.html ">??????? </a>
       
       <a href=" ??????.html ">?????? </a>
      </div>

Solution 8:[8]

How to make space between exemple: Home About Contact

.menu{
      text-align: right; /*exemple*/
  }
  .menu1 {  
      list-style-type:  none;
        display: inline-flex;
    
    }


.test{
    color:red;
    text-decoration: none ;
    padding-inline-end: 55px; /*exemple */
    }
<div class="menu">
            <ul class="menu1">
              <li><a href="#location" class="test">Home</a></li>
              <li><a href="#location" class="test">About</a></li>
              <li><a href="#location" class="test">Contact</a></li>
            </ul>
        </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 yogi
Solution 2 Bhuvan Rikka
Solution 3 Jon Taylor
Solution 4
Solution 5 KeyC0de
Solution 6 Talukdar
Solution 7 Himanshu
Solution 8 Deni

Related Questions