Question

如何定位某些元素，如标题，水平行等，使它们处于我想要的位置。这很难解释，但这是一个例子，你可以理解。

我的基本徽标位于左上方（现在是模板徽标）在同一条线上，或者相同的“位置”我需要它直接放在页面另一侧的徽标对面。唯一的问题是它出现在我的徽标下面。

以下是我预期的方式示例： link

实际情况如下：

JSFiddle：https://gyazo.com/b904252fa22783b78e820d57318798cc

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="homepage.css">
  <title>CSGOMarble</title>
</head>
<body>
<div class="logo">
  <img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<a href="http://www.steamcommunity.com/login/">
<h3 style="float: right; position: fixed;">SIGN IN WITH STEAM</h3>
</a>
<div class="navbar">
    <ul>
      <li><a href="coinflip.html">COINFLIP</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
</div>
</body>
</html>

CSS：

body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 25px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 0;
    text-decoration: none;
}
li a:hover {
    background-color: #555;
    color: white;
}
li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

Answer 1

使用float: right;的内容应在HTML中的内容之前显示。

换句话说，将您的<h3>标记移到包含徽标的div上方，然后删除position属性，这不是必需的。

您还应该更改代码的顺序 - <h3><a>而不是<a><h3>

<body> <h3 style="float: right;"><a href="http://www.steamcommunity.com/login/">SIGN IN WITH STEAM</a></h3> <div class="logo"> <img src="logo.png" alt="LOGO" height="60px" width="200px"> </div> <hr>

<强> updated filddle

Answer 2

您已将徽标放在div元素中。 div元素将占用整行，并且不允许任何其他元素出现在它旁边。（用css表示它是一个块元素）

将徽标保留在span元素中，在徽标div中添加css并将其显示为内联块

In [13]: nums = [1, 2, 3]

In [14]: for x in [4, 5, 6]:
   ....:     nums = map(lambda n: print(x) or (n if x % 2 else n + 10), nums)
   ....:     nums = list(nums)
   ....:     
4
4
4
5
5
5
6
6
6

In [15]: nums
Out[15]: [21, 22, 23]

造型元素

2 个答案: