Question

我已经尝试了一段时间，但似乎无法达到波纹管设计：

String total=“1500.00”;

BigDecimal sPrice = new BigDecimal(total);

.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;
}

如何创建预期的设计布局？（图像中的探索标签旁边的图像）

Answer 1

您甚至不需要图像，只需使用CSS即可。即使使用图像，也可以将display: flex用于.exploreItem，而align-items: center可以发挥作用。

我在这里用：before伪元素放下了更简单的css only解决方案。

.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>

Answer 2

.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>

Answer 3

使用以下代码：

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;
}

如何创建图像和标签的并排布局？

3 个答案: