Having a link right after inline list with a fixed HTML structure

Question

Hie everyone,

I have this HTML structure I can't change :

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>...</li>
  </ul>
  <a href="#">more</a>
</div>

The idea is to have the link right after the last "li" without using javascript.

Here is what i want to do :

inline blocks

And here is the starter kit with Codepen.

possible duplicate of http://stackoverflow.com/questions/4879719/insert-html-from-css — Suresh Ponnukalai, Jul 25 '14 at 08:32

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

You could use css attribute :last-child to change style of the last square.

By the way, pay attention to the compatibility.

Here a simply demonstration.

ul li {
    background-color: red;
}

ul li:last-child {
    background-color: green;
}

Your Codepen updated.

edited May 23 '17 at 12:24

Community

1
1

answered Jul 25 '14 at 08:00

Luca Davanzo

21,000
15
120
146

tuan huynh · Accepted Answer · 2014-07-25T08:32:34.737

0

It working ok

  <!DOCTYPE html >
<html >
<head>

<style>
ul li
{
    float:left;
    display:inline-block;
    width:40px;
    background-color:#FFC0CB;
    margin-right:5px;
    margin-bottom:5px;
    height:40px;
}
a
{
        float:left;
    display:inline-block;
    background-color:#800080;
    height:40px;
    color:white;
    width:40px;
    vertical-align:middle;
}
div ul
{
    width:120px;
}
</style>
</head>


<body>
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>...</li>
  </ul>
  <a href="#">more</a>
</div>
</body>
</html>

Hope this help!

edited Jul 25 '14 at 08:32

answered Jul 25 '14 at 08:02

tuan huynh

727
5
13

exactly.. where do you change last element color? – Luca Davanzo Jul 25 '14 at 08:23
I'm so stupid i forgot to put li to "float" and not ul. It's a shame, sorry for wasting your time :/ Solved. – adoveil Jul 25 '14 at 09:02

score 0 · Answer 3 · answered Jul 25 '14 at 08:07

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <a href="#">more</a>
  </ul>
</div>

just remove the < L I > and the < / L I > before the < a >

Having a link right after inline list with a fixed HTML structure

3 Answers3