как поставить 3 кнопки внизу сайта? - PullRequest
Новая
       2

как поставить 3 кнопки внизу сайта?

0 голосов
/ 14 октября 2019

Мне удалось поставить только одну кнопку, но теперь я хочу добавить еще 2 кнопки слева от первой.

Я пытался, но все кнопки оказались в той же позиции "внизу справа", что и яЯ использую блоггер, поэтому я должен разместить HTML и CSS код на одной странице. 

#ul_top_hypers li {
  display: inline;
  position: fixed;
  bottom: 0px;
  right: 0px;
  max-width: 35%;
  max-height: 35%;
  margin-bottom: 15px;
  margin-left: 5px;
  margin-right: 5px;
}
<ul id="ul_top_hypers">
  <li><a class="unused" href="tel:01027884476"><img src="img 1" /></a></li>
  <li><a class="unused" href="https://m.me/baha2.IT"><img src="img 2" /></a></li>
  <li><a class="unused" href="https://wa.me/201027884476"><img src="img 3" /></a></li>
</ul>

Это мой сайт, если это поможет: здесь .

Ответы [ 2 ]

0 голосов
/ 14 октября 2019

Каждый раз помните, что мы хотим делать и чего нам не хватает. Проверьте в своем коде, что «ul» является нашим основным набором, а «li» - нашим подмножеством. Когда вы фиксируете положение для подмножества, все подмножество будет располагаться в одной позиции, потому что их правое / левое / нижнее / верхнее положение одинаково. Таким образом, мы должны фиксировать положение для нашего основного набора, а не подмножества.

Код обновления будет таким же. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    #ul_top_hypers {
      position: fixed;
      bottom: 0px;
      right: 0px;
    }

    #ul_top_hypers li {
      display: inline;
      max-width: 35%;
      max-height: 35%;
      margin-bottom: 15px;
      margin-left: 5px;
      margin-right: 5px;
    }
    <ul id="ul_top_hypers">
      <li><a class="unused" href="tel:01027884476"><img src="img 1" /></a></li>
      <li><a class="unused" href="https://m.me/baha2.IT"><img src="img 2" /></a></li>
      <li><a class="unused" href="https://wa.me/201027884476"><img src="img 3" /></a></li>
    </ul>
0 голосов
/ 14 октября 2019

В качестве шаблона по умолчанию для этой кнопки используется позиция FIXED, я предлагаю удалить FIXED позицию из li и вместо этого получить ul. 

#ul_top_hypers{
position: fixed;
bottom: 0px;
right: 0px;
}

#ul_top_hypers li{
display: inline;
max-width:35%;
max-height:35%;
margin-bottom:15px;
margin-left:5px;
margin-right:5px;
}
<ul id="ul_top_hypers">
<li><a class="unused" href="tel:01027884476"> <img src="img 1"> </a></li>

<li><a class="unused" href="https://m.me/baha2.IT"> <img src="img 2"> </a></li>

<li><a class="unused" href="https://wa.me/201027884476"> <img src="img 3"> </a></li>
</ul>
...