Question

ETA：感谢大家的帮助！这些都很美妙。非常感谢你的时间！

我正在编写简报（实时预览here和我的目标here）并尝试将导航按钮（“加入会议学习支持”）设置为位于商标。当我在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>

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

尝试将{60}的bottom div添加到nav buttons position: relative的{{1}}。

由于此元素为left，因此可以使用right，top，bottom，#nav#buttons { bottom: 50px; }控制其展示位置，如下所示：

// If the file is small, read it all at once
string[] lines = File.ReadAllLines(@"D:\a.txt");

// TODO: if lines is empty, bail out

using (SqlConnection con = new SqlConnection(@"Data Source=NT;Initial Catalog=SinhVien;Integrated Security=True"))
{
    con.Open();
    // for each line (no ifs or whiles here)
    foreach (var line in lines)
    {
        string[] fields = line.Split(',');
        // TODO: verify fields contain what you want
        // SqlCommand implements IDisposable too
        using (SqlCommand cmd = new SqlCommand("INSERT INTO Sinhvien(ID, HoTen, DiaChi) VALUES (@id, @hoten, @diachi)", con))
        {
            cmd.Parameters.AddWithValue("@id", fields[0]); // these are already strings, no ToString()s needed
            cmd.Parameters.AddWithValue("@hoten", fields[1]);
            cmd.Parameters.AddWithValue("@diachi", fields[2]);
            cmd.ExecuteNonQuery();
        }
    }
}

Answer 4

向左浮动徽标，并为#nav添加边距就可以了。

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

Answer 5

你几乎就在那里。 Inline-Block是我使用的绝对定位导航，但你有一个通用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 个答案: