#html #css #css-shapes
#HTML #css #css-фигуры
Вопрос:
Я новичок в CSS и HTML. При создании фигуры CSS ее положение определяется в реальном коде CSS. При использовании фигуры в HTML, есть ли способ, которым я могу изменить позицию, чтобы я мог повторно использовать одну и ту же фигуру с разными атрибутами позиции вместо того, чтобы объявлять другую фигуру CSS для каждой новой позиции?
.navbutton {
position: fixed;
left: 0em;
top: 8em;
width: 33%;
height: 1.75em;
background: red;
color: black;
font-size: 1.5em;
text-align: center;
padding-top: 0.5em;
}
Если бы я должен был сделать несколько навигационных кнопок рядом друг с другом, используя эту, как бы я это сделал?
Спасибо.
О, и я не знаю никакого другого веб-языка (Javascript, PHP и т.д.).
Комментарии:
1. Не с
position: fixed
🙁
Ответ №1:
Да, вы можете увидеть эту ссылку: ReuseCSSnavButton
ЭТА ССЫЛКА ДЛЯ 3 КНОПОК ТРИ ССЫЛКИ
HTML
<div class="navbutton">first</div>
<div class="navbutton">second</div>
<div class="navbutton">third</div>
<div class="navbutton">fourth</div>
css
.navbutton {
position: relative;
float:left;
width: 100px;
height: 40px;
background: red;
color: black;
font-size: 1.5em;
text-align: center;
padding-top: 0.5em;
margin-right: 0.5em;
}
Комментарии:
1. По-моему, он сказал, что хотел, чтобы это было 33%… если я не ошибаюсь.
2. Спасибо! Я не знал о float.
3. наслаждайтесь! Мир! Продолжайте поддерживать! Голосование!
4. Как я могу добавить пробел между каждой кнопкой, чтобы они не соприкасались? Есть три кнопки, и я пытаюсь поместить пробел в 1% между первой второй и второй третьей.
5. ИСПОЛЬЗУЙТЕ ПОЛЯ СПРАВА В ПРОЦЕНТАХ ДЛЯ КАЖДОЙ
Ответ №2:
Поскольку в навигаторе могут быть разные цифровые кнопки в зависимости от вида, в котором вы находитесь, я рекомендую вам взять ширину из класса button. Что-то вроде этого (пример) CSS
.navbutton {
height: 1.75em;
background: red;
color: black;
font-size: 1.5em;
text-align: center;
padding-top: 0.5em;
float:left;
}
.size-4buttons div
{
width:25%;
}
HTML
<nav class="size-4buttons">
<div class="navbutton">Button 1</div>
<div class="navbutton">Button 2</div>
<div class="navbutton">Button 3</div>
<div class="navbutton">Button 4</div>
</nav>
Комментарии:
1.Спасибо! Я не знал о float.
Ответ №3:
Вы можете определить несколько html-элементов с помощью класса .navbutton, а затем индивидуально задать их положение, используя встроенный атрибут стиля, например:
<div class="navbutton" style="left: 5px; top: 20px;"></div>
<div class="navbutton" style="left: 20px; top: 5px;"></div>
<div class="navbutton" style="left: 8px; top: 13px;"></div>
Если вы хотите, чтобы навигационные кнопки отображались рядом друг с другом, вы можете поместить их в контейнер следующим образом:
<div class="navbutton-container">
<div class="navbutton">Button 1</div>
<div class="navbutton">Button 2</div>
<div class="navbutton">Button 3</div>
<div class="navbutton">Button 4</div>
</div>
Затем пусть каждая кнопка плавает слева, что будет отображать их рядом друг с другом, и пусть они переносятся на следующую строку, если они превышают размер контейнера.
.navbutton-container {
position: fixed;
left: 0em;
top: 8em;
width: 100%;
}
.navbutton {
float: left;
width: 33%;
height: 1.75em;
background: red;
color: black;
font-size: 1.5em;
text-align: center;
padding-top: 0.5em;
}
Вот JSFiddle, показывающий результат:http://jsfiddle.net/sarathijh/mw96Q
Комментарии:
1. Просто помните, что использование встроенных стилей не является хорошей практикой.
2. Спасибо! Я не знал о float.
Ответ №4:
position: fixed
нарушит ваш поток.
Попробуйте что-то подобное вместо этого:
.navbutton {
position:relative;
float:left;
left: 0em;
top: 8em;
width: 33%;
height: 1.75em;
background: red;
color: black;
font-size: 1.5em;
text-align: center;
padding-top: 0.5em;
}
3 объекта одинаковой формы рядом 🙂
Добавьте поле, если вы хотите сделать разрыв между ними.
Комментарии:
1. Спасибо! Я не знал о float. Но это для панели навигации, так что не будет ли исправлено полезно для этой цели?
2. Оберните это в абсолютный контейнер.