Fatal编程技术网
  • html/
  • Html CSS：使用上边距定位项目

Html CSS：使用上边距定位项目

html css

Html CSS：使用上边距定位项目,html,css,Html,Css,ETA：谢谢大家的帮助！这些都做得很好。非常感谢您抽出时间 我正在编写一份时事通讯（实时预览和我的目标），并试图让导航按钮（“加入会议学习支持”）位于徽标的中间位置。当我尝试在navButtons类中使用top margin时，我没有看到任何成功。我怀疑这是一个显示问题，但我不确定——从内联块更改为内联块并没有真正的帮助 <!DOCTYPE html> <html> <head> <title>The Leaflet</title>

ETA：谢谢大家的帮助！这些都做得很好。非常感谢您抽出时间

我正在编写一份时事通讯（实时预览和我的目标），并试图让导航按钮（“加入会议学习支持”）位于徽标的中间位置。当我尝试在navButtons类中使用top margin时，我没有看到任何成功。我怀疑这是一个显示问题，但我不确定——从内联块更改为内联块并没有真正的帮助

<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>

<style>


div
{
    display: inline;
}

a
{
    text-decoration: none;
}
p
{
    text-align:left;
    margin-left: 130px;
    margin-right: 130px;
    max-width: 600px;

}

#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
    position:relative;
}

#navButtons
{
 position:relative;
 right:-240px;
}

#announcementImage
{
    margin-left: 120px;
    margin-right: 120px;
}


a.joinButton
{
    margin-left:40%;
    color:white;
    background-color: #f7853e;
    font-size: 30px;

}

a.navButton
{
    color:#494541;
    font-size: 22px;

}

</style>
</head>
<body>

<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>

<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url">  Meet  </a>
<a class = "navButton" href="url">Learn  </a>
<a class = "navButton" href="url">Support  </a>
</div>

<br>
<br>
<br>
<br>
<br>

<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>

<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and 
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by 
showing how making art and making money don't have to conflict.

Have a comment on a workshop you've attended or a session you'd like to see in our remaining 
Design and Launch weeks? Galen would love to hear from you!</p>

</div>
</body>


传单
div
{
显示：内联；
}
A.
{
文字装饰：无；
}
P
{
文本对齐：左对齐；
左边距：130像素；
右边距：130像素；
最大宽度：600px；
}
#logo/*此设置顶部新叶徽标的宽度。这不应该改变*/
{
位置：相对位置；
}
#导航按钮
{
位置：相对位置；
右：-240px；
}
#公告图像
{
左边距：120像素；
右边距：120px；
}
a、 接合按钮
{
左缘：40%；
颜色：白色；
背景色：#f7853e；
字体大小：30px；
}
a、 导航按钮
{
颜色：#494541；
字体大小：22px；
}










“茁壮成长周”在这里的“叶子”正如火如荼地进行着。到目前为止，我们已经有了国家元首莎伦·佩里
大学区学区职业中心，帮助参与者识别34种特质中的哪一种，
包括吴宇森的特殊品质，是他们在各种环境中运用的优势，因此他们可以
更聪明地工作。然后，Tru冥想和瑜伽的所有者安娜·戈基利让我们留在现在，并
即使在经常引发压力的情况下也要保持平静。斯奈德昨晚会把它带回家吗
展示如何使艺术和赚钱不必冲突。
对您参加的研讨会或您希望在我们剩余的课程中看到的课程发表评论
设计和发布周？盖伦很想听到你的消息
试着用id
nav按钮向
div
添加60px之类的
bottom

由于此元素是
位置：相对的
，因此可以使用
左
、
右
、
顶部
、
底部
控制其位置，如下所示：


#nav#buttons {
    bottom: 50px;
}



我想你想要的是：


#徽标{
垂直对齐：中间对齐；
}

将徽标向左浮动，并在导航上添加边距即可


#logo{float:left；}
#导航{边距顶部：80px；宽度：100%；显示：内联块；}
h1.title{清除：左；}

试试这个


#logo {
    display: inline-block;
    vertical-align: middle;
}

#nav {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}



你快到了。内联块是我在绝对定位导航中使用的，但是您有一个通用的
div{position:Inline；}
适用于div内页面上的所有内容。您应该更具体地指定徽标和导航，只需通过为每个div指定一个类（如
）来摆脱通用样式，这样您就可以针对您想要处理的div

然后试试这个：


#logo {
    width: 240px;
    display: inline-block;

#nav buttons {
    margin: 0px 0px 0px 80px;
    display: inline-block;
    position: absolute;
    top: 80px;}



#徽标{垂直对齐：中间}
？这就是你想要的吗？同意@Krii<代码>垂直对齐：在这种情况下，中间的
将起作用（用于
#徽标
），因为
#徽标
和
id=“nav按钮”
（无效id btw.请参见）都是
内联的
或
内联块
。徽标上的垂直对齐是关键。