Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Botos Claudia
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 Points
Posted by Botos Claudia
.a{fill-rule:evenodd;}techdegree seal-36
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 Points

I can not figure out how to align my close buttons one under the other, no matter the length of each one's message.

I am trying to create a notification pop-up for my project and there I placed three notification, each one with a close button. What I want to do is to align the close buttons one under the other and I can figure out how. I imagine is some quick hack but I can figure it out and I am struggling for some time now. If any of you could help me I would be extremely grateful.

The HTML for the pop-up is:

<section id='pop-up' class='pop-up notify-li'>
    <span class='closebtn-popup'>&times;</span>
    <ul class='pop-up'>
         <li>Check out our charts <span class='closebtn-li'>&times;</span></li>
         <li> Follow our page<span class='closebtn-li'>&times;</span></li>
         <li>Don't forget to smile<span class='closebtn-li'>&times;</span></li>
     </ul>

</section>

While the CSS is:

.notify-li { width: 100%; background-color: #B6DCC7; color:#913d88; display: inline-block; border: 1px solid #4C906B; border-radius: 5px; }

.notify-li li { padding-bottom: 5px; }

.closebtn-li { font-weight: bold; font-size: 1.2rem; margin-left: 15px; transition: 0.3s; }

.closebtn-li:hover { color:#db0a5b; }

Alejandro Narvaja
Alejandro Narvaja
Courses Plus Student 7,340 Points
Alejandro Narvaja
Alejandro Narvaja
Courses Plus Student 7,340 Points

The problem I see is that your > .closebtn-li are inside the > li, which varies according to the width of the text.

There are several ways to approach this.

One without too much modification of the structure is to add to the .closebtn-li a position: absolute; And then a left: 150px; for example. 

 .closebtn-li {
     position: absolute;
     left: 150px;
}

In this way, he positions the object absolutely and sets it apart from the li element about 150px, remaining close to the text and aligned with each other.

Also is important add the position to li

li {
position: relative;
}

But I insist, it has to do with positioning. There are many ways to approach it.

2 Answers

Gerben Dol
Gerben Dol
2,816 Points
Gerben Dol
Gerben Dol
2,816 Points

I agree with Alejandro. This is probably the easiest fix for you. Depending on the exact layout you're trying to achieve I'd say it would be better to have every list item be full width (and control the width of them all by setting the width on the unordered list.

That way you can set the position of the close button to always be on the right.

See https://codepen.io/whisperer/pen/wqxMyg for an example! :-)