Кнопка раскрывающегося списка не центрируется - PullRequest
Новая
       4

Кнопка раскрывающегося списка не центрируется

0 голосов
/ 05 августа 2020

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

Я уже пытался добавить различные выравнивания текста с помощью! Important left, right, margins et c. но это избавило бы меня от многих головных болей, если бы его всегда было легко центрировать. 

<html>
    <head>
        <title> Centered Navigation Menu</title>
    </head>
    <body>
        <div class="dropdown">
            <button class="dropbtn">ÜBER UNS</button>
            <style>
                /* Dropdown Button */

                .dropbtn {
                    position: relative;
                    background: transparent;
                    color: white;
                    padding: 20px;
                    width: 150px;
                    font-size: 15px;
                    border: none;
                    font-weight: 900;
                    font-family: LATO;
                    transition: ease-in-out 0.8s;
                    left: 50% !important;
                    right: auto !important;
                    text-align: center !important;
                    transform: translate(-50%, 0) !important;
                }

                .dropdown:hover .dropbtn {
                    background: white;
                    transition: background ease-in-out 0.5s;
                    color: black;
                }

                /* The container <div> - needed to position the dropdown content */

                .dropdown {
                    position: relative;
                    display: inline-block;
                }

                /* Dropdown Content (Hidden by Default) */

                .dropdown-content {
                    position: absolute;
                    width: 150px;
                    left: -999em;
                }

                .dropdown:hover .dropdown-content {
                    background-color: white;
                    left: 0;
                    transition: background ease-in-out 0.5s;
                    ;
                }

                .dropdown:hover .dropdown-content {
                    display: block;
                }

                /* Links inside the dropdown */

                .dropdown-content a {
                    color: black;
                    padding: 12px 16px;
                    font-size: 15px;
                    text-decoration: none;
                    display: block;
                    text-align: center;
                }

            </style>
            <div class="dropdown-content">
                <a href="#">GALERIE</a>
                <a href="#">LAGE</a>
            </div>
        </div>
    </body>
</html>

Ответы [ 4 ]

0 голосов
/ 05 августа 2020 
    <html>
<head>
<title> Centered Navigation Menu</title>
<style>
    .dropdown {
        display: block;
        text-align: center;
    }
</style>
</head>
<body>
 <div class="dropdown">
  <button class="dropbtn">ÜBER UNS
  </button>
   <div class="dropdown-content">
    <a href="#">GALERIE</a>
    <a href="#">LAGE</a>
  </div>
  <style>
/* Dropdown Button */
.dropbtn {
    position: relative;
  background: transparent;
  color: white;
  padding: 20px;
  width: 150px;
  font-size: 15px;
  border: none;
  font-weight: 900;
   font-family: LATO;
   transition: ease-in-out 0.8s;
  text-align: center !important;
}
.dropdown:hover .dropbtn {
    background: white;
    transition: background ease-in-out 0.5s;
    color: black;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  text-align:center;
  
}
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    position: absolute;
}
.dropdown:hover .dropdown-content {
    background-color:white;
    left: 0;
    transition: background ease-in-out 0.5s;;
}

.dropdown:hover .dropdown-content {display: block;}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  font-size: 15px;
  text-decoration: none;
  display: block;
  text-align: center;
}
</style>
</div>
</body>
</html>

введите описание изображения здесь

0 голосов
/ 05 августа 2020 
Made the changes to following 2 classes:

.dropbtn {
    position: relative;
  background: transparent;
  color: white;
  padding: 20px;
  width: 150px;
  font-size: 15px;
  border: none;
  font-weight: 900;
   font-family: LATO;
   transition: ease-in-out 0.8s;
  text-align: center !important;

.dropdown {
  position: relative;
  text-align:center;
}
0 голосов
/ 05 августа 2020

Чтобы центрировать элементы внутри вашего div class="dropdown">, стилизуйте его с помощью display: block; и text-align: center;

<html>

<head>
    <title> Centered Navigation Menu</title>
</head>

<style>
    .dropdown {
        display: block;
        text-align: center;
    }
</style>

<body>
    <div class="dropdown">
        <button class="dropbtn">ÜBER UNS
        </button>

        <div class="dropdown-content">
            <a href="#">GALERIE</a>
            <a href="#">LAGE</a>
        </div>
    </div>
</body>

</html>
0 голосов
/ 05 августа 2020 
 <html>
<head>
<title> Centered Navigation Menu</title>
</head>
<body>
 <div class="dropdown">
  <button class="dropbtn">ÜBER UNS
  </button>
  <style>
/* Dropdown Button */
.dropbtn {
    position: relative;
  background: white;
  color: red;
  padding: 20px;
  width: 150px;
  font-size: 15px;
  border: none;
  font-weight: 900;
   font-family: LATO;
   transition: ease-in-out 0.8s;
   left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(300%, 0) !important;
  
}
.dropdown:hover .dropbtn {
    transition: background ease-in-out 0.5s;
    
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  text-align: center;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    position: absolute;
    width: 150px;
    left:-999em;
 
}
.dropdown:hover .dropdown-content {
    left: 0;
    transition: background ease-in-out 0.5s;;
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(350%, 0) !important;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  font-size: 15px;
  text-decoration: none;
  display: block;
  text-align: center;
}
</style>
  <div class="dropdown-content">
  <div class="dropdown-menu-center">
 
    <a href="#">GALERIE</a>
    <a href="#">LAGE</a>
  </div>
</div>
</div>
</body>
</html>

Please run code it will center your drop down button
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...