1

私はいくつかのWordPressコード（正確にはWooCommerceプラグイン）を使用しており、サイドバーのコード行をフォーマットして、2つの個別のテキスト項目（1つは<a>、もう1つは<span>）がすべて同じ行に、列の幅いっぱいに、下に境界線を付けます。

これは次のように表示されます (ただし、各テキストの下の境界線は、囲んでいるサイドバー ボックスを完全には超えていません)。

これが私が一緒に生きようとしているコードフラグメントです（つまり、変更したくありません）：

<div class="widget">
  ...
  <ul class="product-categories">
    <li class="cat-item">
      <a href="http://localhost/dalluva/shop/product-category/books/">Books</a>
      <span class="count">(5)</span>
    </li>
    ...

そして、ここに私が今持っているCSSがあります：

.widget ul li a {
   border-bottom: 1px solid #e9e9e9;
    line-height:1.0;
    padding: 5px 0 5px 22px;
    display: inline-block;
 }

.widget ul li span {
   border-bottom: 1px solid #e9e9e9;
   line-height: 1.0;
   padding: 5px 0 5px 0;
   display: inline-block;
 }

上の画像の出力はこの CSS コードに適しているように見えますが、'span' CSS を変更して width:100% を含めると、次のように span 要素が次の行に折り返されます。

http://www.dalluva.com/temp/browse-catalog-2.JPG

white-space: nowrap、overflow: hidden などで遊んだことがありますが、<a> と > の両方の<spanテキストを同じ行に配置し、境界線が幅全体に広がる方法を見つけることができないようです。桁。

4

3 に答える 3

0

.widget ul li span次のスタイルを.widget ul li aの実装から削除しますwidth:100%

display: inline-block;

このフィドルをチェックしてください

于 2012-10-12T04:34:03.053 に答える
0

編集：私は私の答えを完全に修正しました。

残念ながら、いくつかのコンテナを挿入するには、jQueryを使用する必要があると思います。これがないと、下部の境界線をコンテナの端まで拡張することができませんでしたdiv。これが私が思いついたものです。このjsfiddleでデモを見ることができます。

CSS

.widget ul.children {
    padding-left: 20px;
}

.widget .border {
    border-bottom: 1px solid #e9e9e9;
}

.widget span.count {
    padding-left: 3px;   
}

jQuery

$(document).ready(function() {
    $(".widget ul li").each(function() {
        $(this).children().slice(0, 2).wrapAll("<div class='border'></div>");
    });​
});

HTMLを前提として、の最初の2つの子を選択し、liそれらのタグをブロック要素（この場合はdiv）でラップできると仮定しました。そのブロック要素を使用して、境界線でスタイルを設定できるようになりました。adivは自動的にコンテナの幅の100％になるため、境界線が。の限界まで拡張されます.widget。

于 2012-10-13T01:41:48.117 に答える
0

</a>と の間にスペースを入れないでください<span>:

<a href="http://localhost/dalluva/shop/product-category/books/">Books</a><span class="count"> (5)</span>

フィドル: http://jsfiddle.net/pLeZb/7/

PS:そのような小さなものにはフロートを使用しないでください。

HTML を編集できない場合は、フロートをクリアするための適切な方法を使用してください。

.widget ul li span {
   border-bottom: 1px solid #e9e9e9;
   line-height: 1.0;
   padding: 5px 0 5px 5px;
 }

.cat-item {overflow: hidden;}
.cat-item a, .cat-item span {float: left; display: inline;}​

フィドル: http://jsfiddle.net/pLeZb/8/

于 2012-10-13T03:31:30.157 に答える