Как я могу установить нужную стрелку справа от кнопки, а не рядом с текстом? - PullRequest
Новая
       7

Как я могу установить нужную стрелку справа от кнопки, а не рядом с текстом?

0 голосов
/ 27 апреля 2020

Итак, я работаю с html и css, у меня есть эта кнопка с текстом, а затем стрелка в промежутке рядом с ней, но я хочу, чтобы стрелка находилась в дальнем правом углу. кнопка а не прямо рядом с текстом / плашдолдером

Вот мой код: 

.buttonTest {
  text-indent: 20px;
  width: 97%;
  text-align: left;
  background-color: #ffffff;
  -webkit-padding-start: 3rem;
  padding-inline-start: 3rem;
  font-size: 3.5rem;
  -webkit-box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
  box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
  height: 9rem;
}
<button class="buttonTest">
  <span style="font-family:CompactDisplayLight; font-size: 20px; color:pink">Button Push<span> ^ </span></span>
</button>

Ответы [ 3 ]

0 голосов
/ 27 апреля 2020 

.buttonTest {
  text-indent: 20px;
  width: 97%;
  text-align: left;
  background-color: #ffffff;
  -webkit-padding-start: 3rem;
  padding-inline-start: 3rem;
  font-size: 3.5rem;
  -webkit-box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
  box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
  height: 9rem;
  display:flex;
  justify-content:space-between;
  align-items:center
}
<button class="buttonTest">
  <span style="font-family:CompactDisplayLight; font-size: 20px; color:pink">Button Push</span> 
  <span>^</span>
</button>
0 голосов
/ 27 апреля 2020 
<html>
<head>
    <style>
        .buttonTest {
            text-indent: 20px;
            width: 97%;
            text-align: left;
            background-color: #ffffff;
            -webkit-padding-start: 3rem;
            padding-inline-start: 3rem;
            font-size: 3.5rem;
            -webkit-box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
            box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
            height: 9rem;
            position: relative;
        }
    </style>
</head>
<body>
    <button class="buttonTest">
        <span style="font-family:CompactDisplayLight; font-size: 20px; color:pink;position:absolute;right:10px">Button Push<span> ^ </span></span>
    </button>
</body>

Если я правильно понимаю, это должно сработать.

0 голосов
/ 27 апреля 2020

Если вы слегка измените структуру HTML, вы можете использовать комбинацию display: flex и justify-content: space-between для элемента кнопки: 

.buttonTest {
  text-indent: 20px;
  width: 97%;
  text-align: left;
  background-color: #ffffff;
  -webkit-padding-start: 3rem;
  padding-inline-start: 3rem;
  font-size: 3.5rem;
  -webkit-box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
  box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
  height: 9rem;
  font-family: CompactDisplayLight;
  font-size: 20px;
  color: pink;

  display: flex;
  justify-content: space-between;
}
<button class="buttonTest">
  <span>Button Push</span>
  <span> ^ </span>
</button>

Вы можете использовать ту же технику с вашей текущей структурой HTML, но вы нацеливаетесь на первую span, используя дочерний комбинатор (>) : 

.buttonTest {
  text-indent: 20px;
  width: 97%;
  text-align: left;
  background-color: #ffffff;
  -webkit-padding-start: 3rem;
  padding-inline-start: 3rem;
  font-size: 3.5rem;
  -webkit-box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
  box-shadow: inset 0.3rem 0.3rem 0.5rem 0px rgba(0, 0, 0, 0.31);
  height: 9rem;
  font-family: CompactDisplayLight;
  font-size: 20px;
  color: pink;
}

.buttonTest > span {
  display: flex;
  justify-content: space-between;
}
<button class="buttonTest">
  <span>Button Push <span> ^ </span></span>    
</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...