CSS：使用上邊距定位項目

Question

ETA：謝謝大家的幫助！ 這些都工作得很好。 非常感謝您的寶貴時間！

我編碼一個通訊（實時預覽，在這里，我的目標，它在這里），我試圖讓導航按鈕（“加入符合學習支持”）約一半，標志坐。 當我嘗試在navButtons類中使用margin-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>

Answer 1

我認為您正在尋找的是：

#logo {
    vertical-align: middle;
}

Answer 2

嘗試這個

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

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

Answer 3

嘗試使用id nav buttons將類似60px的bottom添加到div 。

由於此元素是position: relative ，因此可以使用left ， right ， top ， bottom來控制它的放置，如下所示：

#nav#buttons {
    bottom: 50px;
}

Answer 4

將徽標向左浮動，並在#nav中添加邊距即可解決問題。

#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }

Answer 5

你快到了。 內聯塊是我在絕對定位導航中使用的，但是您有一個通用div {position:inline;}適用於div內頁面上的所有內容。 您應該更具體地使用徽標和導航，並通過為每個類提供一個類似<div class="WHATEVER">的類來擺脫通用樣式，以便可以定位要使用的div。

然后試試這個：

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

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

CSS：使用上邊距定位項目

問題描述

5 個解決方案

解決方案1
1 2015-11-02 16:42:09

解決方案2
1 2015-11-02 16:47:04

解決方案3
0 2015-11-02 16:38:25

解決方案4
0 2015-11-02 16:45:41

解決方案5
0 2015-11-02 16:56:33

CSS：使用上邊距定位項目

問題描述

5 個解決方案

解決方案1 1 2015-11-02 16:42:09

解決方案2 1 2015-11-02 16:47:04

解決方案3 0 2015-11-02 16:38:25

解決方案4 0 2015-11-02 16:45:41

解決方案5 0 2015-11-02 16:56:33

解決方案1
1 2015-11-02 16:42:09

解決方案2
1 2015-11-02 16:47:04

解決方案3
0 2015-11-02 16:38:25

解決方案4
0 2015-11-02 16:45:41

解決方案5
0 2015-11-02 16:56:33