2

I have the following:

HTML

  <!DOCTYPE html>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <title>Result</title>
        </head>
        <body>
        <div>
            <a href= https://google.com>Google</a>
            <a href= https://google.com>Google</a>
            <a href= https://google.com>Google</a>
            </div>
        </body>
    </html>

CSS

    a:hover{
        text-decoration: none
    }
    a:first-child{
        color: #CDBE70
    }
    a:nth-child(3){
        color: #FFC125
}

I just started learning HTML and I have a problem. What I have above displays 3 links to google but they are all on the same line. I want each of the links to be on a new line. I tried using <p> and changed all the a's to p's in the CSS code but it doesn't do anything.

Alejandro
  • 3,726
  • 1
  • 23
  • 29
Justin Lau
  • 21
  • 1
  • 1
  • 2

10 Answers10

7

If the links are semantically in a list, you should reproduce that in the markup as well:

<ul>
    <li><a href="https://google.com">Google</a></li>
    <li><a href="https://google.com">Google</a></li>
    <li><a href="https://google.com">Google</a></li>
</ul>

If you don't want to have bullets in front of the links, you can remove them with CSS list-style-type: none; on either the ul or the lis.

Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
2

CSS: Add display: table in your tag

a{display: table;}
Jenti Dabhi
  • 870
  • 5
  • 11
1

You can do it with CSS by using float:left; and clear:left;

a {
    float:left;
    clear:left;
}
Naveen Kumar Alone
  • 7,536
  • 5
  • 36
  • 57
0

Use the <br/> tag to break the row.

<a href="https://google.com">Google</a><br/>

But with this solution you'll have to modify the css, as the next <a> is no longer a child. Instead you can use nth-of-type and first-of-type:

a:hover { text-decoration: none }
a:nth-of-type(3) { color: #FFC125 }
a:first-of-type { color: #CDBE70 }

This will assure that only <a> tags are part of the selectors.

or you can put each link in it's own <div>:

<div class="menu"><a href="https://google.com">Google</a></div>
<div class="menu"><a href="https://google.com">Google</a></div>
<div class="menu"><a href="https://google.com">Google</a></div>
a:hover { text-decoration: none }
div.menu:nth-child(3) a { color: #FFC125 }
div.menu:first-child a { color: #CDBE70 }
Mackan
  • 6,200
  • 2
  • 25
  • 45
  • When I do
    , the css messes up. Instead of the last link being golden yellow it makes the second link golden yellow and the last link will be blue.     – Justin Lau Apr 24 '15 at 06:51
0
Try using break to give a line break between the three links like this;   

<div>
        <a href= https://google.com>Google</a><br/>
        <a href= https://google.com>Google</a><br/>
        <a href= https://google.com>Google</a><br/>
</div>
  • <br> produces a line break in text.
  • Line break tag can be placed in other HTMl elements like paragraphs, lists, tables and headings
  • Use line break tag for minor formatting issues. For larger issues use tables and align attribute.
  • Line break tag does not require a closing tag.

  • For increasing the gap between the lines of text use CSS margin property.

    • margin-bottom: 0 • margin-left: 0 • margin-right: 0 • margin-top: 0

Kurenai Kunai
  • 1,842
  • 2
  • 12
  • 22
0

You can try this:

Working Demo

a{ 
    display:block; 
    margin-bottom:10px;
}
a:hover{
    text-decoration: none
}
a:first-child{
    color: #CDBE70
}
a:nth-child(3){
    color: #FFC125
}
jbutler483
  • 24,074
  • 9
  • 92
  • 145
Pradeep Pansari
  • 1,287
  • 6
  • 10
0

Simply add <br/> or <p> tag after each of your link ,it will be displayed on new line. :)

Dannie
  • 11
  • 7
0

see this Demo

and css

<style>     
  div a{
   display:list-item;
   }
</style>
Kishan
  • 1,182
  • 12
  • 26
0

In order for you to break into a new line, you should look to use the display: block; declaration in your css.

Here's a few reasons as to why to use display instead of float.

Floating elements is all well and good, but can become messy due to the 'floated element' coming out of the DOM, which makes it harder to position other elements.

a elements default to display:inline, meaning multiple a tags appear in a single line. By changing them to display:block; means that only one will be in a row at a time (i.e. what you are looking for).

A quick demo would be something like:

a:hover {
  text-decoration: none
}
a:first-child {
  color: #CDBE70
}
a:nth-child(3) {
  color: #FFC125
}
a {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <title>Result</title>
</head>

<body>
  <div>
    <a href="https://google.com">Google</a>
    <a href="https://google.com">Google</a>
    <a href="https://google.com">Google</a>
  </div>
</body>

</html>
Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
jbutler483
  • 24,074
  • 9
  • 92
  • 145
-1

You can do what Twitter's Bootstrap does all over the place and surround your elements with divs with proper classes. What I would do is:

CSS

.anchors a:hover{
        text-decoration: none
    }
    .anchors div:first-child a{
        color: #CDBE70
    }
    .anchors div:nth-child(3) a{
        color: #FFC125
}

HTML

<div class="anchors">
    <div>
        <a href= https://google.com>Google</a>
    </div>
    <div>
        <a href= https://google.com>Google</a>
    </div>
    <div>
        <a href= https://google.com>Google</a>
    </div>
</div>

I surrounded a tags with divs to make the a tags selectable by their indexes in css. In order to access them in the dom, defined a wrapper div and named its class anchors. I am first selecting the wrapper div (.anchors) and accessing it's child divs with indexes and then their anchors.

Here is the working fiddle.

ilter
  • 4,030
  • 3
  • 34
  • 51