css 我怎么能在我的页面上有永远不会移动的链接？

6ovsh4lw 于 12个月前发布在其他

关注(0)|答案(2)|浏览(89)

我有一个段落和标题，是css的中心，我有5个不同的网页，所有的链接，我已经对齐到每一页的最左边，每个链接低于对方。但是因为我在每个页面上都有文字，我的链接向下移动，所以它们在每个页面上都是不均匀的，所以基本上我的文字越多，我的链接就越往下。
有没有一种方法，我只是永久保持我的链接在同一地点，无论什么？

.header a {
  color: rgb(235, 238, 205);
  text-align: left;
  padding: 10px;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

h1 {
  text-align: center;
}

p {
  text-align: center;
}

<body>
  <h1> Default Title </h1>
  <p>Temporary paragraph text.</p>
  <div class="header">
    <a href="Page 1">Test Page 1</a><br>
    <a href="Page 2">Test Page 2</a><br>
    <a href="Page 3">Test Page 3</a><br>
    <a href="Page 4">Test Page 4</a><br>
    <a href="Page 5">Test Page 5</a><br>
  </div>
</body>

css

来源：https://stackoverflow.com/questions/76367413/how-can-i-have-links-on-my-page-that-never-move

2条答案

按热度按时间

i5desfxk1#

你可以使用position：绝对的。像这样：

.header { position: absolute; left: 0; }

然后你可以使用left，right，top，bottom来设置你的header div的确切位置。如果需要，您还可以添加z-index属性，以将标题div定位在其他元素之上。
如果在滚动使用位置时它也应该停留在同一位置：粘性。（相同属性：顶部/底部/...）

赞(0）回复(0）举报 12个月前

np8igboo2#

有很多方法可以做到这一点，这取决于你真正想做什么。在这里，内联块似乎是一个显而易见的选择

.header a {
  color: rgb(235, 238, 205);
  text-align: left;
  padding: 10px;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}
h1 {
  text-align: center;
}
p {
  text-align: center;
}

.header{
   display:inline-block;
   width:15%;
   border:solid 1px red;
   }
   
   #container{
   display:inline-block;
   vertical-align:top;
   text-align:center;
   width:calc(85% - 8px);
   border:solid 1px green;
   }

<body>

  <h1> Default Title </h1>
  
<div class="header">
  <a href="Page 1">Test Page 1</a><br>
  <a href="Page 2">Test Page 2</a><br>
  <a href="Page 3">Test Page 3</a><br>
  <a href="Page 4">Test Page 4</a><br>
  <a href="Page 5">Test Page 5</a><br>
</div>
<div id='container'>
  <p>Temporary paragraph text.</p>
  </div>
</body>

赞(0）回复(0）举报 12个月前

我来回答

css 我怎么能在我的页面上有永远不会移动的链接？

2条答案

相关问题

热门标签

最新问答