Question

<div class="HeaderLink" id="Home">  
<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>MDB1</title>  
<link rel="stylesheet" type="text/css" href="Index.css" />  
</head>  
<body id="HeaderFive">  
<div class="HeadPanelElement" lang="en" id="HeadPanel"> <a href="Blog" id="HeaderOne" title="Blog link" target="_self" class="HeadPanelElement">Blog</a>  
<a href="Videos" id="HeaderTwo" title="Video's link" target="_self" class="HeadPanelElement">Videos</a>  
<a href="Okay" id="HeaderThree" title="Homepage link" target="_self" class="HeadPanelElement">Home</a>  
<a href="Contact" id="HeaderFour" title="Contact link" target="_self" class="HeadPanelElement">Contact</a>  
<a href="About MDB1" id="HeaderFive" title="About MDB1 link" target="_self" class="HeadPanelElement">About MDB1</a> </div>  
</body>  
</html>  
</div>  


@charset "utf-8";
/* CSS Document */

.HeadPanelElement{
position: absolute;  
width: 10%;  
left: -10%;  
}  
#HeadPanel{
left: 15%;  
width: 100%;  
height: 100%;  
font-family: Georgia, "Times New Roman", Times, serif;  
border: dashed;  
border-color: #C00;  
border-width: 2px;  
font-size: 1em;

意图是页面布局如此

为什么位置属性不起作用？

Answer 1

快速做...

#HeadPanel
{
    display: inline;
    width: 100%;
}

.HeadPanelElement
{
    width: 10%;
    /* or 
    padding: 10px; */
}

这里真正的因素是显示：内联;这将以并排的方式布置div。

Answer 2

您正在使用'left：'，但您没有包含'position：absolute'？试试这可能会有所帮助。

Answer 3

对于left和top之类的声明有任何意义，您需要将它们应用于定位元素：

#foo {
  position:absolute;
  top:10%;
  left:25%;
}

您的元素似乎未被定位为absolute或relative。

您的标记还有许多其他问题会导致许多问题。你的所有标记都应该在body标签内：

<!DOCTYPE html>
<html>
  <head>
    <title>Foo Example</title>
    <style type="text/css">
      #foo { 
        position:absolute; 
        top:10%; left:10%; 
        background:yellow;
        padding:10px 20px;
        border:1px solid #000;
        color:#000; 
        width:30% 
      }
    </style>
  </head>
  <body>
    <!-- all markup goes here -->
    <div id="foo">Hello World</div>
    <!-- all markup goes here -->
  </body>
</html>

在线演示：http://jsbin.com/efukol/edit

Answer 4

position: absolute;将帮助您获得有趣的布局。

Answer 5

这里有一些事情发生：

A元素是内联的，东西会紧挨着，比如BlogVideosHomeContactAbout MDB1，我相信你已经看过了。
此LOOKS类似于列表或菜单，因此请使用适当的标记。列表标记是最好的，或者如果你想尝试HTML5，已经有NAV元素专门用于此目的。
我注意到您没有在元素中使用网址。最好使用不会在服务器上生成404的内容。
除非您使用的是框架，否则为什么还要使用target =“_ self”？如果是这种情况，请Google支持框架是邪恶的。如果没有，则A）_self是多余的，B）如果您使用Strict doctype，则出于可访问性原因，不推荐使用target属性。
如果服务器配置为使用索引，则命名CSS文件index.css可能会让您遇到麻烦。带有任何后缀作为默认页面。更好的是像style.css。

现在要了解这些事情，你可以采取以下几种方式：

/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}

/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}

使用div标签定位元素

5 个答案: