Софтуерно Инженерство
Loading...
massbless avatar massbless 5 Точки

HTML5 & CSS - Lab exercise 8. Navigation Icons

Здравейте,

Малко ме е срам да си призная, но закъсах още на първото задание, което не е straightforward. Поради някаква причина иконките отказват да се наредят хоризонтално, въпреки че в .CSS файла съм задал:

.icons li {

display: inline-block;

}

Item-ите са разписани точно както е предложено в PP презентацията:

<ul class="icons">
        <li>
            <a href="#">
                <img src="../images/home.png" />
                <div>Home</div>
            </a>
        </li>
        ...

</ul>

Някой има ли идея какво би могло да пречи на блоковете да се наредят в линия?

 

Тагове:
massbless:
Problem solved.
r3v3nan7 avatar r3v3nan7 364 Точки

Вмъкнал ли си правилно .css файла 

<link rel="stylesheet" type="text/css" href="nav-icons.css">

Другите ти стилове работят ли ?

0
15/06/2016 21:32:57
massbless avatar massbless 5 Точки

Да, всичко останало от CSS файла изглежда да работи.

Мога ли да attach-вам малки zip-ове директно към коментарите си във форума? Не виждам опция за прикачване, drag & drop не прави нищо.

EDIT: Освен да ги пусна в pastebin:

html --> http://pastebin.com/jkCBVcSU
css  --> http://pastebin.com/1DUCAuTL

 

0
15/06/2016 22:27:06
idmitrov avatar idmitrov 55 Точки

width: 130px; в .icons т.е толкова ти е широк ul елемента и няма как да ги събереш, или му дай width: 100%; или изчисли колко width ти трябва за да ги събереш всичките, или си намали самите li-та

1
15/06/2016 22:38:33
massbless avatar massbless 5 Точки

@idmitrov

Благодаря ти - това опрaви проблема!

В началото бях решил, че там се задава размерът на всяка иконка, а след това като съм стигнал до ".icons li a { }" и не съм съобразил да се върна по-нагоре и да го сменя с по-подходящо число.

Бих ти дал best answer, но като е коментар към чужд отговор и не разрешава :(

0
15/06/2016 22:54:57