Lista horyzontalna wewnatrz diva

Question

Hej,

Projektuje sobie strone w codepenie i mam problem z utworzeniem ramki takiej jak tutaj na w pierwszej kolumnie na samym dole https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147

Przedstawię teraz swój pomysł na to:

- Chce zrobić jednego diva dla całej tej dolnej ramki, a w nim trzy odzielne divy dla tych trzech elementow:

1) napis CLOSE jako <span>?

2) te 4 kropeczki jako horyzontalnej unordered list przy uzyciu display:inline

3) to pewnie będzie jakaś ikona z Font Awesome

Mam problem ze zlepieniem napisu CLOSE z tymi kropeczkami. 

Podaje JsFiddle z moim wykonaniem, nie wiem czemu te kropki są na samym dole tego diva. 

https://jsfiddle.net/q7cyu7sa/2/

Ktoś pomóglby by to zmienic? Może pomysł jaki mam jest zbyt skomplikowany do zrealizowania i jest coś lepszego ( zapewnie bez używania tej listy)?

Pozdrawiam 

Staszek

Answer 1

https://jsfiddle.net/q7cyu7sa/13/

Answer 2

stwórz diva który przetrzyma elementy:text,kropki i ikonke.Nadaj temu div'owi position:relative .Elementom wewewnątrz tego diva nadaj position:absolute,top: np 50px; i każdemu elementowi indywidualnie left:10px  kolejnemu elementowi left:50px; itd.To jeden ze sposobów rozwiązania tego problemu.

Comments

ta, ale to nie rozwiazuje problemu wyswietlania sie tych 4 kropek, ktore sa na samym dole swojego diva