如何更改div位置

时间:2018-12-06 15:59:30

标签: html css

enter image description here

如何将“ ,, Kontakty”放在棕色位置?如何将StronaGłówna/ Projekty / O mnie放在蓝色/橙色/绿色/棕色的中间?我是新手,并且--frandomtextwhichallowmepublicthis -----随机文本哪个允许我公共-----随机文本随机文本哪个允许我公共-----随机文本哪个允许我公共---

 
 
 
body
{
    background: url(bg.jpg);
    background-size:100%;
    background-attachment: fixed;
}
 
div.container
{
    width:1140px;
}
 
div.nav
{
    position:absolute;
 
    width:100%;
    font-family: 'Permanent Marker', cursive ;
    color: rgb(161, 240, 161);
    font-size:60px;
     /*
        padding: 25px 50px 75px 100px;
        top padding is 25px
        right padding is 50px
        bottom padding is 75px
        left padding is 100px
    */
 
}
 
ul
{
    list-style-type: none;
}
 
li.top
{
    width:540px;
    float:left;
}
<html lang="pl">
    <head>
            <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
        <meta charset="utf-8">
        <link rel="stylesheet" href="StyleSheet.css">
    </head>
    <body>
<div id="container">
            <div class="nav">
    <ul>
        <li class="top">Strona główna</li>
        <li class="top">Projekty</li>
        <li class="top">O mnie</li>
        <li class="top"> Kontakt</li>
    </ul>
            </div>
</div>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

body
{
    background: url(bg.jpg);
    background-size:100%;
    background-attachment: fixed;
}
 
div.container
{
    width:1140px;
}
 
div.nav
{
    position:absolute;
 
    width:100%;
    font-family: 'Permanent Marker', cursive ;
    color: rgb(161, 240, 161);
    font-size:60px;
     /*
        padding: 25px 50px 75px 100px;
        top padding is 25px
        right padding is 50px
        bottom padding is 75px
        left padding is 100px
    */
 
}
 
ul
{
    list-style-type: none;
}
li {
  display:inline;
  font-size:22px !important;
}
<html lang="pl">
    <head>
            <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
        <meta charset="utf-8">
        <link rel="stylesheet" href="StyleSheet.css">
    </head>
    <body>
<div id="container">
            <div class="nav">
    <ul>
        <li class="top">Strona główna</li>
        <li class="top">Projekty</li>
        <li class="top">O mnie</li>
        <li class="top"> Kontakt</li>
    </ul>
            </div>
</div>
    </body>
</html>

当您要单行对齐“ li”中的内容时,必须使用CSS“ display:inline”或“ display:inline-block;”代表li......。您可以在我的代码中看到它