NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Marvar
Člen
Avatar
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
Avatar
Michal
Člen
Avatar
Odpovídá na Marvar
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č
Řešení problému
 
Nahoru Odpovědět
3.1.2017 22:23
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.