我正在建立一个网站，使用 django、CSS、HTML。 我已经发布了我目前正在处理的 html 文件中的一些部分。我是 CSS/HTML 的新手。所以我在使用属性 top、left、right 定位链接时遇到问题，您可以在下面看到。 margin-top、margin-left 属性也不起作用。你能就如何做到这一点提出建议吗？
{% extends "base.html" %}
{% block style %}
div{
margin-top:1px;
float:right
}
.button1{
color:White;
background-color:SaddleBrown;
padding:5px;
font-family:Comic Sans MS;
font-size:20px;
display: inline-block;
cursor: pointer;
border: none;
border-radius: 12px;
}
{% endblock %}
{% block body %}
<a href="{%url "steak"%}" class="button1" top="100px" right="110px">STEAKS</a>
<a href="{%url "salad"%}" class="button1" top="570px" left="150px"> SALADS</a>
<a href="{%url "drink"%}" class="button1" top="830px" left="400px">DRINKS</a>
{% endblock %}
编辑：答案如下：
<a href="{%url "steak"%}" class="button1" style="position:absolute; top:200px; right:190px">STEAKS</a>
<a href="{%url "salad"%}" class="button1" style="position:absolute; top:570px; left:150px"> SALADS</a>
我添加了样式属性，位置：绝对。
我不确定您要编写的代码是什么，将来您的目标应该是尽可能具体。但我假设你正在尝试做这样的事情？
牛排
喝
沙拉
首先，您需要将显示设置为阻塞，因为链接是内联元素。然后您需要将位置更改为绝对位置，这会将它们从页面流中移除。然后你可以利用 top 和 left 属性。
<a href="{%url "steak"%}" class="steak-button">STEAKS</a>
<a href="{%url "salad"%}" class="salad-button"> SALADS</a>
<a href="{%url "drink"%}" class="drink-button">DRINKS</a>
.steak-button, .salad-button, .drink-button {
display: block;
position: absolute;
}
.steak-button {
top: 100px;
right: 110px;
}
.salad-button {
top: 570px;
left: 150px;
}
.drink-button {
top: 830px;
right: 400px;
}
CEVAP 1
<html>
<head>
<title>CSS Öğreniyorum</title>
<style type "text/cas">
.baslik{
color:white;
text-align:left;
ornek1 { font-size:40px;
}
</style>
</head>
</body>
<p class="ornek1">Bu paragrafta px kullanılmıştır.</p>
</body>
<html>
CEVAP 2
.yoghurt-button {
top: 110px;
right: 150px;
}
CEVAP 3
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
}
</style>
HTML 元素有一个
style<a href="" class="button1" style="top: 100px; right: 110px;"></a>HTML 用于构建页面布局，CSS 用于更改其外观。