Question

我正在使用django，CSS，HTML建立网站。我已经发布了当前正在处理的html文件中的某些部分。我是CSS / HTML的新手。因此，使用顶部，左侧，右侧的属性来定位您可以在下面看到的链接时遇到了问题。属性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>

我添加了样式属性position：absolute。

Answer 1

我不确定您要尝试编码的内容是什么，将来您应该以尽可能具体为目标。但是我假设您正在尝试做这样的事情？

牛排

饮料

色拉

首先，您需要将显示设置为阻止，因为链接是内联元素。然后，您需要将位置更改为绝对位置，这会将它们从页面流中删除。然后，您可以利用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;
}

Answer 2

export class launcher
{
    static async getGames()
    {
        return undefined;
    }
    static async getUser()
    {
        return undefined;
    }
}
export class CefSharp
{
    static async BindObjectAsync(object)
    {
        return undefined;
    }
}

Answer 3

HTML元素具有style属性，该属性使您可以在元素上编写内联CSS：

<a href="" class="button1" style="top: 100px; right: 110px;"></a>

HTML用于构建页面布局，CSS用于更改页面外观。

示例：https://itsolutionstuff.com/post/php-dynamically-add-remove-input-fields-using-jquery-ajax-example-with-demoexample.html

使用属性在HTML中定位链接

3 个答案: