высота кнопок не соответствует

avatar
Alfonzo Al Greene
7 апреля 2018 в 23:10
42
3
-1

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

Это мой css для слайд-шоу:

/=== РАЗДЕЛ СЛАЙД-ШОУ ===/

#container
{
    width: 90%;
    height: 700px;
    border: none;
    margin: 0 auto;
    position: relative;

}

#container > img
{
    width: 100%;
    height: 100%;
    position: absolute;
}

#container > .btn
{
    position: absolute;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 25px;
    top: 350px;
    background: #000000;
    color: #ffffff;
    font-size: 20px;
}

#container>#btn1:hover
{
    box-shadow: 10px 0px 20px 0px #343d46 ;
}
#container>#btn2:hover
{
    box-shadow: -10px 0px 20px 0px #343d46;
}

#container>#btn2
{
    position: relative;
    float: right;    
}

картина проблемы

Источник
Praveen Kumar Purushothaman
7 апреля 2018 в 23:14
0

Подсказка находится на высоте.

Temani Afif
7 апреля 2018 в 23:18
0

я не вижу кнопок меня ??

Friday Ameh
7 апреля 2018 в 23:29
0

Добавьте свой html-фрагмент

Ответы (3)

avatar
Friday Ameh
7 апреля 2018 в 23:38
0
change your

#container>#btn2
{
    position: relative;
    float: right;    
}  
to  
#container>#btn2
{
    right:0;    
}
Friday Ameh
8 апреля 2018 в 00:25
0

Пожалуйста. Вы сделали все правильно только этот класс. Не торопитесь, чтобы понять позицию. Я рекомендую вам посетить w3school для дальнейшего обучения.

avatar
s89_
7 апреля 2018 в 23:45
0

Абсолютное позиционирование обычно не следует применять к классам (нескольким элементам).

Я бы удалил абсолютное позиционирование в вашем .btns и использовал flexbox в вашем контейнере, например так:-

#container
{
    width: 90%;
    height: 700px;
    border: none;
    margin: 0 auto;
    display: flex; /* adds flexbox to container */
    align-items: center; /* vertically aligns everything in container */
    justify-content: space-between; /* spaces the buttons as far away `enter code here`from each other as possible */
}

Затем вы можете добавить отступы к контейнеру для более точной настройки горизонтального расстояния кнопок от края контейнера.

Alfonzo Al Greene
7 апреля 2018 в 23:48
0

Интересно, спасибо. Буду изучать флексбоксы. Я новичок в HTML, извините за невежество.

s89_
7 апреля 2018 в 23:57
0

Не волнуйтесь! Мы все новички в какой-то момент! Вот хороший ресурс для изучения flexbox — flexboxfroggy.com. Еще одна причина не использовать абсолютное позиционирование заключается в том, что оно не подходит для мобильного/отзывчивого дизайна, потому что все фиксировано, в то время как с помощью flexbox и других методов все является гибким и хорошо реагирует на изменение размера страницы и т. д.

avatar
samcozmid
7 апреля 2018 в 23:14
0

Попробуйте добавить это перед #container>#btn2:

#container>#btn1
{
 position: relative;
 float: left;    
}