1

我正在使用一些 WordPress 代码（确切地说是 WooCommerce 插件），并且我正在尝试在侧边栏中格式化一行代码，以便 2 个单独的文本项（一个在<a> 中，另一个在<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 更改为包含宽度：100% 时，它会导致 span 元素换行到下一行，如下所示：

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

我玩过 white-space: nowrap, overflow: hidden 等，但我似乎无法找到一种方法让<a> 和<span> 文本在同一行上，边框延伸到整个宽度柱子。

4

3 回答 3

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 回答
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，我假设我可以选择 的前两个孩子li，然后将这些标签包装在块元素中（在本例中为 a div）。使用该块元素，我现在可以使用边框对其进行样式设置。由于 adiv自动为其容器宽度的 100%，因此它为您提供了延伸到.widget.

于 2012-10-13T01:41:48.117 回答
0

从以下样式中删除.widget ul li span并.widget ul li a执行以下样式width:100%

display: inline-block;

看看这个小提琴

于 2012-10-12T04:34:03.053 回答