Question

下面我在名称和图像之间的菜单上有硬编码的虚线，我无法弄清楚如何获得调整到我现在所处位置之间宽度的虚线。

这是我的下面的代码。我基本上想要删除硬编码的.....并且在内部重复图像或者更容易的某种方式使其更好，我该如何处理？我一直对这个问题感到困惑......

  <script type="text/javascript">
  $(document).ready(function(){

  $('.serviceDesc').hide();
  $('.serviceName:first').addClass('active').next().show(); 

  $('.serviceName').click(function(){
  if( $(this).next().is(':hidden') ) { 
  $('.serviceName').removeClass('active').next().slideUp(); 
  $(this).toggleClass('active').next().slideDown(); 
  }
  return false; 
  });

  });
  </script>
  <style>
  #servicesContainer {
      width: 485px;
      height: 400px;
      margin: 0 auto;
      margin-top: 20px;
  }
  h2.serviceName {
      margin: 0;
      margin-bottom: 5px;
      margin-top: 5px;
      background-image: url(http://i.imgur.com/IcnZl.png);
      background-position: right top;
      background-repeat:no-repeat;
      height: 29px;
      line-height: 24px;
      width: 480px;
      font-size: 18px;
      font-weight: bold;
      float: left;
      color:#000;
  }
  h2.serviceName a {
      color: #000;
      text-decoration: none;
      display: block;
  }
  h2.active {
      background-position: right bottom;
  }
  .serviceDesc {
      margin: 0 0 10px;
      padding: 0;
      overflow: hidden;
      width: 480px;
      clear: both;
  }
  .serviceDesc .block {
  }
  .serviceDesc .block p {
      color: #413f44;
      margin: 0;
      font-size:18px;
  }
  </style>

  <div id="servicesContainer">
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.<br />
          <br />
        </p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................<br />
      </a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
      </div>
    </div>
  </div>

您可以在此处查看示例： http://jsfiddle.net/K7MHK/

Answer 1

使用重复的x背景图像创建一个点是最简单的方法但是，您需要将其所在的元素设置为宽度：100％或您想要的宽度。

例如

<html>
  <head>
    <style>
      .filler{
        background: url(dot.png) bottom left repeat-x;
        float:left;
        width:80%;
      }
      .floating_text {
        float:left;  
      }
    </style>
  </head>
  <body>
    <h2 class="serviceName"><a href="#">
      <span class="floating_text">Text</span>
      <span class="filler">&nbsp;</span>
    </a></h2>
  </body>
</html>

跨度似乎挂钩<h2></h2>高度而不是<a></a>高度，这就是导致问题出现在两行上的原因。

在您的示例中，点看起来位于跨度中间的原因是因为您的图像，删除底部的白色并且它将显示为正常。

Answer 2

我觉得有更好的方法可以做到这一点，但它正在逃避我。希望这可以帮助某人获得一个强有力的答案。我只为第一个列表项做了它。

http://jsfiddle.net/K7MHK/1/

我使用css border-bottom属性在元素上创建虚线。那么问题是 - 你如何并排获得两个元素。一个包含文本，另一个包含点。需要注意的是需要占据剩下的空间。我无法找到一个好方法。

所以相反，我让这些点完全相同，但将文本放在一个绝对定位的div中。这允许它漂浮并隐藏点。

/* set h2 to relative so that we can absolutely position an element inside of it */
/* Give it padding so that dots don't intersect the image*/
h2.serviceName {
   padding-right: 50px;
   position: relative;

/* absolutely position div to cover dots and give it bg that matches */
div#a { position: absolute; top: 0; left: 0; background: white; }
/* modify the height property here to adjust the location of the dots*/
div#b { 
  width: 100%; 
  border-bottom: 1px dotted red; 
  height: 18px; 
}

所以可以使这更好的事情：

不要依赖绝对定位的div
也许使用行高？定位文本，这样您就不必手动调整点位置。

Answer 3

好的 - 在我学习提问者之后的另一个答案是不能将元素实际上放在彼此之上。这是因为他有一个需要透露的背景。经过对SO的大量研究后发现，两个动态并排的div不能填充固定的宽度。所以你需要依靠一张桌子。

http://jsfiddle.net/K7MHK/6/

   //html
   <h2 class="serviceName"><a href="#">
        <table>
            <tr>
                <td>Text of Variable Length</td>
                <td><div></div></td>
            </tr>
        </table>  
    </a>
   </h2>

所以我们使用一个擅长这个的表。右手单元格自动扩展。在里面我们放置一个带有虚线css边框属性的div。然后我们通过div高度调整点的位置。

table { width: 440px; }
table td { white-space: nowrap; }
table td:last-child { width: 100%; }
table td:last-child div { width: 100%; border-bottom: 2px dotted black; height: 15px; }

Answer 4

我会将a-tag的css设置为

h2.serviceName a {
    color: #000;
    text-decoration: none;
    display: block;
    overflow: hidden;
    margin-right: 45px;
}

字和图像html问题之间的虚线跨度

4 个答案: