Question

餐厅网站和菜单。我需要在菜单项和价格之间获得“点线”。我需要一个接一个地手动写点。此功能应自动运行。

是否可以通过使用span或div等背景来创建它？

我在哪里

enter image description here

我需要的地方

enter image description here

感谢您提前。

Answer 1

我认为你会找到这样的东西：

<强> HTML

<div>
    <div>Marinated Olives</div>
    <div class="dot"></div>
    <div>4.00E</div>   
</div>

<强> CSS

.dot{
    border-bottom: dotted 3px orange;
    width: 100px;
    float: left;
    position: relative;
    display: block;
    height: 12px;
    margin: 0 5px 0 5px;
}

div:first-child, div:last-child{
    float:left;
}

fiddle

您可以使用宽度来调整喜欢的内容。

另一种使用css :after

的方法

<强> HTML

<div>
    <div id="dotted">Marinated Olives</div>   
    <div>4.00E</div>   
</div>

<强> CSS

div{
    float:left;
}

#dotted::after{
    content: "..................";
    letter-spacing: 4px;
    font-size: 18px;
    color:orange;
    margin-left:20px;
}

fiddle

在这里，您可以播放内容和字母间距。希望它有所帮助：）

Answer 2

使用绝对定位的div？段落的白色背景？适用于任何长度的menu-item-name。玩弄它，祝你好运！

<div class='item_wrapper'>
    <p class='item_name'>Marinated olives</p>
    <p class='item_price'>4,00€</p>
    <div class='dotted_line'></div>
</div>

.item_wrapper{
    width:100%;
    clear: both;
}
.dotted_line{
    border-top:dotted 2px orange;
    position:relative;
    width:100%;
    top:33px;
    z-index:-1;
}
p{
    position:relative;
    background:white;
    padding:0px 10px;
}
.item_name{
    float:left;
}
.item_price{
    float:right;
}

http://jsfiddle.net/MrgBM/

Answer 3

这样的事情？

ol li {
  font-size: 20px
}
.dot-div {
  border-bottom: thin dashed gray;
  width: 100%;
  height: 14px
}
.text-div {
  margin-top: -14px
}
.text-span {
  background: #fff;
  padding-right: 5px
}
.pull-right {
  float: right;
  padding-left: 5px
}

<ol>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item one</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item two with long text</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item three midium</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
</ol>

JsFiddle

Answer 4

您可以使用此代码生成以下行：

    #helper{

    width:200px;
    border: 1px dashed orange;
}

来源：http://jsfiddle.net/2j9BN/

Answer 5

你可以使用css。

如果您只是添加

border: thick dotted;

到css的相应部分。这将在它应用的整个元素周围创建一个虚线边界。如果您希望只有元素下方的点，请使用：

border-bottom: thick dotted;

如果你想要不同的尺码，你也可以使用思维点缀或点缀。

然后你可以添加橙色来获得颜色：

border-bottom: thick dotted orange;

希望这会有所帮助：）

Answer 6

.text-div {
  background-image: linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 0%);
  background-position: 0 14px;
  background-size: 10px 1px;
  background-repeat: repeat-x;
  width: 100%;
  height:25px;
}

.text-span {
  background: #fff;
  padding-right: 10px
}

.pull-right {
  float: right;
  padding-left: 10px
}

<ol>
  <li>
    <div class="text-div">
      <span class="text-span">Item:</span>
      <span class="text-span pull-right">$125.00</span>
    </div>
  </li>
  <li>
    <div class="text-div">
      <span class="text-span">Very long name of the item:</span>
      <span class="text-span pull-right">$20.00</span>
    </div>
  </li>
  <li>
    <div class="text-div">
      <span class="text-span">Not long name:</span>
      <span class="text-span pull-right">$30.00</span>
    </div>
  </li>
</ol>

项目之间的点线

6 个答案: