Поместите ссылку в HTML, используя атрибуты - PullRequest
Новая
       6

Поместите ссылку в HTML, используя атрибуты

0 голосов
/ 28 января 2019

Я строю сайт, используя 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>

Я добавил атрибут стиля, позиция: абсолютная.

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Я не уверен, что вы пытаетесь закодировать, и в будущем вы должны стремиться быть как можно более конкретным.Но я предполагаю, что вы пытаетесь сделать что-то подобное?

стейк

напиток

салат

Сначала вам нужно установитьотображать для блокировки, так как ссылки являются встроенными элементами.Затем вам нужно изменить положение на абсолютное, что позволит удалить их из потока страниц.Тогда вы можете использовать верхний и левый атрибуты. 

<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;
}
0 голосов
/ 28 января 2019

HTML-элементы имеют атрибут style, который позволяет записать встроенный CSS в элемент:

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

HTML используется для структурирования макета вашей страницы, CSSиспользуется для изменения внешнего вида.

Пример: https://jsfiddle.net/w7e2r5zg/1/

...