问HTML元素的动态定位
EN

Stack Overflow用户

提问于 2013-12-13 14:30:17

回答 1查看 4.7K关注 0票数 1

我有一个网站，运行良好，看起来还可以，等等。问题是我不是最好的定位，浮动等。而不是元素只是排成一排在另一个，我必须手动设置越来越大的页边距为每个额外的段落我添加。

我的导航栏由一个固定div中的ul组成。ul不是浮动的，但“li”是浮动的。我需要一种方法来定位这个和其他元素，使一切都在导航栏下面。我尝试过使用clear: both；但都没有用。我知道我的定位是杂乱无章的，我真的不明白定位和浮动是如何/是否继承的。

这里有一个website的链接。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <link rel="stylesheet" type="text/css" href="webfonts/stylesheet.css">
        <title>
            Artwork
        </title>
    </head>
    <body>
        <div class="navbar">
        <img src="images/navbar/title.png" class="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="art.html">Art</a></li>
                <li><a href="about.html">About Me</a></li>
            </ul>
        </div>
        <h1 id="header">Welcome to my Website!</h1>
        <p>
            The purpose of this website is to showcase my artwork, and, in a way, my HTML skills. Click on
            one of the links up top, and you can see some of my <b>artwork</b> or maybe learn <b>about me</b>!
        </p>
    </body>
</html>

CSS：

html{
    height: 100vh;
    width: 100vw;
    margin: 0px;
}

body{
    height: 100vh;
    width: 100vw;
    margin: 0px;
    background-color: #009900;
}

div.navbar{
    height: 50px;
    width: 100vw;
    position: fixed;
    background-image:url('images/navbar/navbar.png');
    background-repeat:repeat-x;
}

#header{
    position: relative;
    float: left;
    margin: 40px 0px 0px 5px;
    font-family: 'League Gothic', sans-serif;
}

p {
    position: absolute;
    margin: 100px 0px 0px 5px;
    font-family: 'Ubuntu', sans-serif;
}

img.navbar{
    float: left;
}

ul{
    list-style-type: none;
    margin: 4px 0px 0px 0px;
    padding: 0;
    overflow: hidden;
}

a:link,a:visited
{
display: block;
width: 120px;
font-weight:  500;
font-family: 'Ubuntu', sans-serif;
color:  #FFFFFF;
text-align: center;
padding: 4px;
margin: 0px;
text-decoration:  none;
}

li{
    float: left;
{

html

css

回答 1

Stack Overflow用户

发布于 2013-12-13 16:14:39

是的，而不是手动给所有东西的保证金，为什么你不使用保证金为整个包装器，内容后面固定的导航栏check this fiddle

.nav-bar{
    height:50px;
    overflow:hidden;
     background-color:#000;
     width:100%;
     position:fixed;
     top:0px;
     left:0px;
 }

.content{
    margin-top:75px;
}

和html

<div class="nav-bar">
    <h1>
        topbar
    </h1>
    <ul>
        <li>one</li>
        <li>tow</li>
        <li>three</li>
    </ul>
</div>
<div class="content">
    <h2>content</h2>
    <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20560444

复制

相似问题

问HTML元素的动态定位
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML元素的动态定位EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML元素的动态定位
EN