时间戳

首页 > 解决方案 > 如何让我的底部边框显示在右侧

html - 如何让我的底部边框显示在右侧

问题描述

我有一个类似于下面的代码，但我似乎无法让它工作。我想要文本上方和下方右侧的底线；

<!DOCTYPE html>
<html>
<head>
<style>


.row feature:before {
    content : "";
    position: absolute;
    right    : 18.75%;/**/
    bottom  : 0;
    height  : 1px;
    width   : 25%;  /* or 100px */
    border-bottom:1px solid magenta;
}

</style>
</head>
<body>

<div id="features">
  <div class="row"  style="margin-top: 20px; width: 100vw;">
    <div class="small-12 medium-9 small-centered columns">
      <section class="row feature">
        <a>
          <div class="medium-4 small-12 columns" style="border-radius:28px; border: solid thin #38D9D6; -webkit-box-shadow: 1px 1px 2px 3px #ccc; -moz-box-shadow: 1px 1px 2px 3px #ccc; box-shadow: 1px 1px 2px 3px #ccc; height:300px; width:300px; background-color: #EDA3A4;">
            <div class="carousel-caption">
              <h3> Chat Bot</h3>
            </div>
          </div>
        </a>
        <div class="medium-8 small-12 columns" style="color: black; font-family: 'Josefin Sans', sans-serif; margin-top: 6.25%; text-align: center;">
          <h2 style=" font-size: 1.6em; font-weight: 500;">Chat Bot</h2>
          <p style="color: black; font-family: 'Josefin Sans', sans-serif; font-size: 1.3em; font-weight: 100;">This feature is able to respond to most of your questions instantly.<br>You can ask as many questions as you can once you register and personalize your settings.<br> Welcome aboard.</p>
        </div>
      </section>
    </div>
  </div>
</div>



</body>
</html>

标签： htmlcss

解决方案

你可以像这样使用css：

border-bottom:1px solid magenta;
border-top:1px solid magenta;
border-right:1px solid magenta;

推荐阅读