Question

以下是我的HTML。我在三列中总共有3张卡片，并且只希望左侧和右侧是透明的。我尝试将边框设置为白色/透明但没有成功。。我想要的是

.user-panel .card {
  margin-top: 1px;
}

.user-panel {
  min-height: 170px;
}

.user-panel,
.user-panel .card {
  display: flex;
  height: 100%;
}

.user-panel,
.user-panel .card .item {
  height: inherit;
  text-align: center;
}

.user-panel .user-profile-details .item {
  background-color: #edfaff;
}

<div class="row no-padding user-panel">
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div class="row"><i class="user-profile-icon"></i> </div>
              <div>{{data}}</div>
              <div>(015106)</div>
              </div>
         </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div>MY ACCESSES</div>
           </div>
         </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div>MY ACCESSES</div>
          </div>
         </span>
      </div>
    </div>
  </div>
</div>

Answer 1

你为什么用卡片。只需给出一些自定义类名并为其定义css。像下面这样的东西可以毫无缺陷地工作。

<div class="col col-33 no-padding">
    <div class="card-access  no-padding">
        <div class="item item-text-wrap">
            <span>
                           <div>
                               <div>MY ACCESSES</div>
                           </div>
                       </span>
        </div>
    </div>
</div>

Answer 2

    .user-panel .card {
       border: 1px solid #ccc;
//remove  this
    }


//add this
    .bordered-col {
        border-right : 1px solid #ccc;
    }

<div class="row no-padding user-panel">
    <div class="bordered-col col col-33 no-padding">
        <div class="card  no-padding">
            <div class="item item-text-wrap">
                <span>
                               <div>
                                   <div class="row"><i class="user-profile-icon"></i> </div>
                                   <div>{{data}}</div>
                                   <div>(015106)</div>
                               </div>
                           </span>
            </div>
        </div>
    </div>
    <div class="col col-33 no-padding">
        <div class="card  no-padding">
            <div class="item item-text-wrap">
                <span>
                               <div>
                                   <div>MY ACCESSES</div>
                               </div>
                           </span>
            </div>
        </div>
    </div>
    <div class="col col-33 no-padding">
        <div class="card  no-padding">
            <div class="item item-text-wrap">
                <span>
                               <div>
                                   <div>MY ACCESSES</div>
                               </div>
                           </span>
            </div>
        </div>
    </div>

</div>

Answer 3

尝试在每个 MY ACCESS 中添加class，例如<div class="access1">MY ACCESS</div>和<div class="access2">MY ACCESS</div>然后添加此CSS样式：

.no-padding > span > .access1{
   border-right: 0;
}

.no-padding > span > .access2{
   border-left: 0;
}

请包括您的CSS样式，以便我们可以解决您的问题。如果不起作用，请发表评论。

如何使卡的左右边界处于离子透明状态

3 个答案: