0

我试图弄清楚是否有一种更优雅的方式来创建以下 HTML 按钮。

在此处输入图像描述

我目前正在使用一个<a href="...">和两个子<span>元素创建它，如下所示： -

<a href="">
    <span class="box_button">Read more</span>
    <span class="box_button_arrow">&gt;</span>
</a>

CSS 如下所示： -

span.box_button {
  display: block;
  float: left;
  padding: 6px 10px 8px 10px;
  border: 4px solid white;
  color: white;
}
span.box_button_arrow {
  display: block;
  float: left;
  color: white;
  padding: 6px 10px 8px 10px;  
  border-top: 4px solid white;
  border-right: 4px solid white;
  border-bottom: 4px solid white;
}

请注意箭头跨度的左侧没有边框。

这是代码笔 - http://codepen.io/bobmarksie/pen/bEPVgM

是否可以用单个 HTML 元素替换 2 个跨度？

4

4 回答 4

1

您可以使用它::after来执行此操作。使用此解决方案，您可以删除span元素。这是您更新的示例：

div.info_box {
  float: left;
  width: 230px;
  height: 230px;
  padding: 40px;
  background: #A95563;
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
} 
div.box_title {
  font-size: 22px;
  padding: 0px 0px 20px 0px;
}
div.box_main {
  font-size: 16px;
  line-height: 120%;
  height: 120px;
}
a.box_button {
  border:4px solid #fff;
  color:#fff;
  display:inline;
  padding:6px 10px 8px 10px;
  text-decoration:none;
}
a.box_button::after {
  border-left:4px solid #fff;
  content:">";
  margin-left:10px;
  padding:6px 0px 8px 10px;
}
<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a class="box_button" href="">Read more</a>
</div>

你可以在这里找到一个工作的codepen：http: //codepen.io/anon/pen/JGQYyG

于 2016-02-20T22:48:03.497 回答
1

让我们在语义上使按钮成为按钮并使用 CSS 设置样式。这是 HTML 的症结所在，它非常简单：

    <button class="button">
      Read more
    </button>

CSS 是完成繁重工作的地方。如果您运行代码片段，很难发现它与原始代码之间的区别。

  a {
    text-decoration: none;
  }

  button.button {
    background: transparent;
    border: 4px solid white;
    color: white;
    display: block;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 16px;
    padding: 7px 46px 7px 10px;
    position: relative;
  }

  button.button:after {
    border-left: 4px solid white;
    content: ">";
    padding: 7px 10px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0
  }


a {
  text-decoration: none;
}
div.info_box {
  float: left;
  width: 230px;
  height: 230px;
  padding: 40px;
  background: #A95563;
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
} 
div.box_title {
  font-size: 22px;
  padding: 0px 0px 20px 0px;
}
div.box_main {
  font-size: 16px;
  line-height: 120%;
  height: 120px;
}

a {
  text-decoration: none;
}

button.button {
  background: transparent;
  border: 4px solid white;
  color: white;
  display: block;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 16px;
  padding: 7px 46px 7px 10px;
  position: relative;
}

button.button:after {
  border-left: 4px solid white;
  content: ">";
  padding: 7px 10px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0
}
<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a href="">
    <button class="button">
      Read more
    </button>
  </a>
</div>

于 2016-02-21T01:59:41.087 回答
0

您可以通过使用 :after 选择器来实现

 <a href="">
    Read more
 </a>

a:after {
  content: ">";
}
于 2016-02-20T22:47:14.060 回答
0

删除内部跨度，用于line-height垂直居中文本，并使用::after伪元素，因此您将拥有一个元素而不是 3 个

代码笔

div.info_box {
  float: left; width: 230px; height: 230px; padding: 40px; background: #A95563;
  color: white; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
div.box_title { font-size: 22px; padding: 0px 0px 20px 0px; }
div.box_main { font-size: 16px; line-height: 120%; height: 120px; }

.box_button {
  display: block;
  float: left;
  line-height: 40px;
  padding: 0 0 0 10px;
  border: 4px solid white;
  color: white;
  text-decoration: none;
}
.box_button::after {
  content: '>';
  /* same value as .box_button padding-left, to have equal space on both sides */
  margin-left: 10px; 
  width: 40px;
  text-align: center;
  display: inline-block;
  border-left: 4px white solid;
}
<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a href="" class="box_button">
  Read more
 </a>
</div>

于 2016-02-20T22:52:13.750 回答