Разместите ссылку в HTML, используя атрибуты
Я создаю веб-сайт, используя 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>
Я добавил атрибут стиля, позиция: абсолютная.
Разрешите ли вы использовать <div> для переноса ссылок? Это делается так легко с помощью одной оболочки <div> flex-box.
Ответы 3
Элементы HTML имеют атрибут style, который позволяет вам писать встроенный css для элемента:
<a href = "" class = "button1" style = "top: 100px; right: 110px;"></a>
HTML используется для структурирования макета вашей страницы, CSS используется для изменения ее внешнего вида.
Пример: https://jsfiddle.net/w7e2r5zg/1/
Это так, хотя вам потребуются дополнительные стили. Чтобы использовать свойства top/right/bottom/left для элемента, у целевого элемента должна быть позиция (например, position: relative).
Как я уже сказал, это вообще не работает. Ссылки не перемещаются с помощью style = "top: 100px; right: 110px.
Не будь упрямым, как ты упомянул, что ты новичок. Я сделаю пример, чтобы доказать, что это работает :)
Я добавил доказательство концепции, проверьте его.
@aspiring, похоже, ты игнорируешь мой ответ. Поскольку вы не хотите попробовать мой рабочий ответ, я желаю вам удачи в поиске решения вашей проблемы. Откройте чат, если вам нужна дополнительная помощь.
Я обдумываю ваш ответ. Похоже, вы правы. Спасибо.
Круто, надеюсь, вы найдете подходящее решение :)
Я не уверен, что вы пытаетесь закодировать, и в будущем вы должны стремиться быть как можно более конкретным. Но я предполагаю, что вы пытаетесь сделать что-то подобное?
стейк
напиток
салат
Сначала вам нужно настроить отображение на блокировку, поскольку ссылки являются встроенными элементами. Затем вам нужно будет изменить позицию на абсолютную, что удалит их из потока страниц. Затем вы можете использовать атрибуты 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;
}
Вы также должны использовать определенные имена классов, а не button1, чтобы ваш код был разборчивым, легко читаемым и, что более важно, удобным для навигации.
Помимо атрибутов позиции для класса кнопка 1, я использовал другие особенности стиля, абсолютно одинаковые для этого класса. Но ваш код не подразумевает использование других атрибутов стиля для того же класса. Эти ссылки принадлежат одному и тому же классу, и этот класс имеет имя button1! Мне не нужны разные имена и разные классы.
Извините, я не согласен с этим ответом.
@aspiring, тебе не нужно защищаться. Поскольку вы объяснили, что вы новичок в CSS/HTML, я даю вам совет, который вы можете принять или проигнорировать. Вы по-прежнему можете добавлять любые дополнительные атрибуты к основному классу, я просто отвечал на вашу проблему позиционирования.
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>
Привет, не могли бы вы добавить какое-то объяснение, почему вы думаете, что это отвечает на вопрос?
При использовании сверху, слева, снизу или справа элементы должны располагаться как угодно, кроме статического (это положение по умолчанию). Попробуйте добавить
position:relativeв свой css и посмотрите, работает ли он так, как вы хотите. Также использование таких атрибутов не будет работать - используйте css в таблице стилей или используйте атрибут стиля для установки этих значений.