Diskuze: Drobný fix pro moji navigaci

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Marvar

Člen

Marvar:3.1.2017 20:57

Ahoj,
chtěl bych se zeptat, jak donutím navigaci, aby jednotlivé "<li>" roztáhla od kraje ke kraji podle již nastylované hlavičky.

HTML:

<!DOCTYPE HTML>
<html lang="cs-cz">

<head>
<title>PyWeb</title>
<link rel="shortcut icon" href="obr/title.png">
<link rel="stylesheet" type="text/css" href="css/index.css">
<meta charset="UTF-8">
</head>

<body>

<header>
        <nav>
        <ul>
                <li class="f"><a href="#">FÓRUM</a></li>
                <li class="s"><a href="#">SOFTWARE</a></li>
                <li class="h"><a href="#">HARDWARE</a></li>
                <li class="p"><a href="#">PYTECH</a></li>
                <li class="py"><a href="#">PYTHON</a></li>
        </ul>
        </nav>
</header>

<main>
</main>

<footer>Created by Já
</footer>

</body>

</html>

CSS:

html
{font-family:"Arial"}
header
{width:1000px;
height:50px;
margin:auto;}
nav ul
{margin-left:0px;
list-style-type:none;}
nav ul li
{float:left;
padding:0px 25px;
margin:0px 0px;
font-size:15px;
height:50px;
line-height:3.5em;}
nav a
{color:white;
text-decoration:none;}
nav ul li:hover
{box-shadow:0px 0px 5px black;}
.f
{background-color:#CDCD00;}
.s
{background-color:#D2B48C;}
.h
{background-color:#CD7054;}
.p
{background-color:#71C671;}
.py
{background-color:#999999;}
footer
{width:1000px;
height:50px;
margin:auto;
background-color:#61C5F6;}

\---

Odpovědět

3.1.2017 20:57

Michal

Člen

Michal:3.1.2017 22:23

Ahoj, stačí, když ke tvému CSS přidáš:

nav ul {
   padding: 0;
}

nav ul li {
   box-sizing: border-box;
   width: 20%;
}

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

3.1.2017 22:23

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.