Question

所以，我正在为一家餐馆建立一个网站，而我正在泡菜中。我试图在那里创建菜单。我们的想法是将食物名称与左侧对齐，价格向右，并用点填充它们之间的间隙。喜欢这个

汉堡包............................................ $ 4.00

XXL汉堡.................................... $ 4.00

奶昔.............................................. $ 4.00

我找到了几个解决方案，只有当你的背景有一种颜色且没有纹理时才有效。我的想法是用点填充整行，并将名称/价格背景跨度设置为与站点背景相同的颜色，因此点不会显示。但我有一张背景图片。

我不会在这里发布我的代码，因为它并不重要或有帮助。

甚至可能吗？不仅仅是css，也可以用JavaScript完成。

Answer 1

我有点晚了，但你可以很容易地用径向渐变来做到这一点：

.col {
  display: inline-block;
  vertical-align: top;
}

.names span {
  width: 200px;
  display: flex;
}

.prices span {
  display: block;
  text-align:right;
}

.names span:after {
  content: "";
  display: inline-block;
  height: 1em;
  flex-grow: 1;
  background: radial-gradient(black 25%, transparent 25%) scroll repeat-x bottom left/5px 5px;
}

<div class='names col'>
  <span>Hamburger</span>
  <span>Hot Dogs</span>
  <span>Superman Hamburger</span>

</div>
<div class='prices col'>
  <span>$1.00</span>
  <span>$0.50</span>
  <span>$400.00</span>
</div>

的 JSFiddle Demo

Answer 2

使用display:table;和display: table-cell;表示列表元素内的div，border-bottom: Xpx dotted black;表示点。

＆＃13;

ul{
  margin: 0;
  padding: 0;
}
ul li{
  display: table;
  width: 100%;
}
ul li div {
  display: table-cell;
}
ul li div.food {
  padding-right: 5px;
}
ul li div.dots {
  border-bottom: 1px dotted #000;
  width: 100%;
  position: relative;
  top: -4px;
}
ul li div.price {
  padding-left: 5px;
}

＆＃13;

<ul>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots">&nbsp;</div>
    <div class="price">10.00$</div>
  </li>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots"></div>
    <div class="price">10.00$</div>
  </li>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots"></div>
    <div class="price">10.00$</div>
  </li>
</ul>

＆＃13;

Answer 3

使用简单的javascript和css很容易，这里有一个小提琴：jsfiddle

关键是将包含点的div的宽度设置为列的宽度减去食物名称的宽度减去价格的宽度，并确保有足够的点来覆盖距离，并设置溢出：隐藏为点div。

$(".menu-row").each(function(index, element) {
    var menuRowWidth = $(element).width();
    var foodItemWidth = $(element).children('.food-item').width();
    var priceWidth = $(element).children('.price').width();
    var $dotFiller = $(element).children('.dot-filler');
    var dotFillerWidth = menuRowWidth - foodItemWidth - priceWidth;
    $dotFiller.width(dotFillerWidth + "px"); 
});

然后浮动项目并向左点，右边的价格，全部在设定宽度列内。溢出：为点设置隐藏也很重要，因为当我们在javascript中设置该div的宽度时，我们希望所有额外的点都被切断。 CSS：

.food-item {
  float: left
}

.dot-filler {
  overflow: hidden;
  width: 0;
  float: left;
}

.price {
  float: right;
}

.menu-row {
  width: 400px;
}

然后按如下方式构建你的html：

<div class="menu-row">
  <div class="food-item">Steak</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$18.00</div>
</div>

<div class="menu-row">
  <div class="food-item">Hamburger</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$8.00</div>
</div>

Answer 4

您可以使用包装器设置名称+点的固定宽度。

css将如下所示：

.wrapper {
  width: 300px;
  overflow: hidden;
  display: inline-block;;
  white-space: nowrap;
}

像这样的HTML：

<div>
  <ul class="noDisc">
    <li>
      <div class="wrapper">
      <span>HAMBURGER </span>
      <span>...............................................................</span>
      </div>
      <span>$ 40.00</span>
    </li>
     <li>
      <div class="wrapper">
      <span>FRIED CHIKEN </span>
      <span>...............................................................</span>
      </div>
      <span>$ 13.00</span>
    </li>
     <li>
      <div class="wrapper">
      <span>STEAK ON A STICK </span>
      <span>...............................................................</span>
      </div>
      <span>$ 99.00</span>
    </li>
  </ul>
</div>

实时样本：

fiddle

Answer 5

感谢。我使用了你在这里所做的并改进了它。此代码适用于woocommerce产品项目，但可以根据您的需要进行编辑。 $ containerElement是您测量宽度的元素。

/**
 * dotFiller
 * adds dynamic dot leaders between product title and count element (<mark>)
 * @return void
 */
var dotFiller = function(){
    var $containerElement = $('ul.products li.product.has-children h2'),
        df  = '<div class="df">.....................................................................</div>';
        $containerElement.each(function(i,el){
                var $el = $(el),
                    w   = $el.width(),
                    mw  = $el.find('mark').width(),
                    tw  = $el.find('span').width(),
                    dfw = (w - mw - tw) - 24;
                // if its not there, lets add it
                if (!$(el).has('.df').length){
                    $el.find('span').after(df);
                }
                $el.find('.df').css('width',dfw + "px");
        });
};
dotFiller();

使用此代码，您可以像这样更新/重新计算调整大小：

$('window').on('resize',function(){ dotFiller(); });

这是我对内部元素的css：

        mark {
            background-color: transparent;
            color: $secondary;
            display: inline-block; float: right;
            font-weight: normal;
        }
        div.df { 
            overflow: hidden; 
            display: inline-block; 
            margin-left: 10px; 
            position: relative; 
            top: 2px; 
            font-weight: normal; 
            opacity: 0.8; 
        }

我希望这有助于某人！

Answer 6

使用带有带有柔性分隔线并带有边框底部的div来获得容易的前导点...柔性布局似乎是最优雅的解决方案。没有伪元素，或左右块显示等...非常简单...

HTML

<div class="list-item">

    <div class="header-row">
      <h4>Menu</h4>
    </div>

    <br>

    <div class="list-item-row">
      <div class="left">Hamburger</div>
      <div class="dots"></div>
      <div class="right">$5.00</div>
    </div>

    <div class="list-item-row">
      <div class="left">Hamburger (XXL)</div>
      <div class="dots"></div>
      <div class="right">$7.50</div>
    </div>

    <div class="list-item-row">
      <div class="left">Milkshake</div>
      <div class="dots"></div>
      <div class="right">$3.50</div>
    </div>

    <div class="list-item-row">
      <div class="left">Pickle</div>
      <div class="dots"></div>
      <div class="right">Free</div>
    </div>

</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Lato|Montserrat:400,700|Roboto:400,700");

* {
  margin: 0;
  padding: 0;
}

button {
  font-family: "Roboto";
  font-size: 16px;
  padding: 5px;
  border-radius: 3px;
  border: solid #424242 1px;
}

.list-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20px;
  font-family: "Lato";
  background: #f0f0f0;
  padding: 10px;
  border: solid #e0e0e0 1px;
}

.list-item-row,
.header-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .left,
  .right {
    font-family: "Roboto";
  }
  .right {
    color: blue;
  }
}

.dots {
  flex: 1 0 0;
  border-bottom: dotted 2px #b0b0b0;
  margin-left: 1em;
  margin-right: 1em; 
}

在此处查看Codepen => https://codepen.io/anon/pen/vVZmxB

点头与图片背景

6 个答案:

的 JSFiddle Demo