Как создать бок о бок макет изображения и метки? - PullRequest
Новая
       9

Как создать бок о бок макет изображения и метки?

0 голосов
/ 14 февраля 2020

Я уже некоторое время пытаюсь, и, кажется, не могу добиться дизайна ниже:

enter image description here

.exploreItem {
  background-color: #353258;
  /* rgba(31, 31, 31, 1) */
  border: 1px solid #4152F1;
  color: white;
  /* padding: 20px 24px; */
  cursor: pointer;
  width: 90%;
  height: 45px;
  /* font-size: 15px;
  font: Arial;
  font-family: sans-serif;
  display: block; */
}
.exploreImg {
  /* background-color: lightblue; */
  display: inline-block;
  vertical-align: top;
  height: 30px;
  /* width: 10px; */
  padding-left: 10px;
}
.exploreLabel {
  /* vertical-align: middle; */
  /* background-color: grey; */
  display: inline-block;
  font-size: 15px;
  font: Arial;
  font-family: sans-serif;
  /* width: 10px; */
  margin-top: 0px;
}
         <div class="exploreItem" id="exploreItem">
           <img class="exploreImg" src="images/defaultProfImg.png">
           <label class="exploreLabel">Explore</label>
         </div>

Как создать макет предполагаемого дизайна? (Изображение рядом с меткой исследования, как на картинке)

Ответы [ 3 ]

2 голосов
/ 14 февраля 2020

Вам даже не нужно изображение, просто используйте css, чтобы сделать это. И даже если вы используете изображение, вы можете использовать display: flex для .exploreItem, а align-items: center может сделать волхвы c.

. Я написал здесь более простое решение css only with: before pseudo элемент. 

.exploreItem {
  background-color: #353258;
  border: 1px solid #4152F1;
  color: white;
  cursor: pointer;
  padding: 16px;
  width: 90%;
  border-radius: 32px;
}
.exploreLabel {
  display: flex;
  align-items: center;
  font-size: 15px;
  font: Arial;
  font-family: sans-serif;
  margin-top: 0px;
}
.exploreLabel:before {
  content: '';
  height: 28px;
  width:28px;
  background-color: #4152F1;
  border: 1px solid #a89dff;
  display: block;
  margin-right: 16px;
  border-radius: 50%;
}
  <div class="exploreItem" id="exploreItem">
     <label class="exploreLabel">Explore</label>
  </div>
1 голос
/ 14 февраля 2020

Используйте ниже код:

HTML: 

<div class="outer">
  <div class="round"></div>
  <label>
      <span>Explore</span>
  </label>
</div>

CSS: 

.outer
{
    background: #353258;
    border: 1.5px solid #4152F1;
    color: white;
    padding: 7px 8px;
    cursor: pointer;
    width: 150px;
    height:33px;
    border-radius: 30px;
    cursor: pointer;
}
.round
{
    background: #502ffb;
    height: 28px;
    width: 28px;
    display: inline-block;
    border: 1px solid white;
    border-radius: 50%;
}

label
{
    color: white;
    display: inline-block;
    cursor: pointer;
}

label span
{
    position: absolute;
    margin-top: -24px;
    margin-left: 3px;
    font-size: 17px;
}
1 голос
/ 14 февраля 2020 

.wrapper {
        width: 200px;
    }
    .exploreItem {
        width: 100%;
        display: flex;
        background: transparent;
        padding: 20px 30px;
        border: 1px solid transparent;
        border-radius: 50px;
        align-items: center;
        cursor: pointer;
    }
    .exploreItem label {
        color: #919191;
    }
    .exploreItem.active {
        display: flex;
        background: #2F2D50;
        border: 1px solid #483EF1;
    }
    .exploreItem.active label {
        color: #ffffff;
    }
    .exploreItem i {
        display: block;
        background: #A3A3A3;
        border: 1px solid transparent;
        width: 25px;
        height: 25px;
        border-radius: 50px;
        margin-right: 10px;
    }
    .exploreItem.active i {
        background: #483EF1;
        border: 1px solid #A5A0FF;
    }
<div class="wrapper">
    <div class="exploreItem active">
        <i></i>
        <label class="exploreLabel">Explore</label>
    </div>
    <div class="exploreItem">
        <i></i>
        <label class="exploreLabel">Explore</label>
    </div>
</div>
...