0

次の HTML ボタンを作成するためのよりエレガントな方法があるかどうかを把握しようとしています。

ここに画像の説明を入力

<a href="...">現在、次のように 1 つと2 つの子<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

2 つのスパンを 1 つの HTML 要素に置き換えることは可能ですか?

4

4 に答える 4

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 に答える
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>

ここで見つけることができる作業コードペン: http://codepen.io/anon/pen/JGQYyG

于 2016-02-20T22:48:03.497 に答える
0

:after セレクターを使用してそれを実現できます

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

a:after {
  content: ">";
}
于 2016-02-20T22:47:14.060 に答える