Top.Mail.Ru
Ответы

Как поставить кнопку с меню справа?

HTML код:

12345678910111213
             <div id = 'right_div'> 
                <div id = 'menu_out_div'> 
 
                    <div id = 'menu_div'> 
                        <button id = 'btn_menu'><img src="https://media\menu.png alt=menu" width="-1" height="-1" alt = "true|false"/></button> 
                        <div id = 'menu_div_content'> 
                            <p>1 пунк</p> 
                            <p>2 пунк</p> 
                            <p>3 пунк</p> 
                        </div> 
                    </div> 
                </div> 
            </div> 

CSS код:

123456789101112131415161718192021222324252627282930313233343536373839404142434445
 #menu_div { 
    display:grid; 
} 
 
#menu_div_content{ 
    border: black; 
    border-radius: 30px; 
    background-color: rgb(219, 219, 219); 
    display: none; 
    position: absolute; 
    width: 200px; 
} 
 
#menu_div:hover #menu_div_content{ 
    display: block; 
} 
 
#btn_menu{ 
    border: none; 
    background-color: rgba(240, 248, 255, 0); 
    cursor: pointer; 
    right: 0px; 
    justify-items: end; 
} 
 
#menu_div_content > p{ 
    bottom: 10px; 
    margin: 10px; 
    top: 10px; 
    left: 20px; 
    border-radius: 10px; 
    width: 180px; 
    text-align: center; 
    justify-items: center; 
    align-items: center; 
} 
 
#menu_div_content > p:hover{ 
    background-color: darkgray; 
} 
 
#menu_out_div{ 
    right: 0px; 
    justify-items: end; 
} 

Сейчас сайт выглядит так:

Мне нужно, чтобы кнопка меню находилась справа страницы, но чтобы я не пробовал - не получается. И right: 0, и justify-items: end;, но ни в какую не хочет

По дате
По рейтингу
Аватар пользователя
Новичок

Укажите width: xx px

Аватар пользователя
Мудрец

position: absolute;
right: 20px;
top: 20px;

Аватар пользователя
Мудрец

Попробуй это:

12345678910
 #menu_div { 
  position: fixed; 
  top: 0; 
  right: 0; 
  display: grid; 
} 
 
#btn_menu { 
  justify-self: end; 
}