gpt4 book ai didi

css - 使用 div 标签定位元素

转载 作者:太空宇宙 更新时间:2023-11-03 19:47:27 24 4
gpt4 key购买 nike

<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;

页面的意图是像这样布局

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

最佳答案

快速做...

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

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

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

关于css - 使用 div 标签定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6462236/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com