9

餐厅网站和菜单。我需要在菜单项和价格之间获得“点线”。我需要在不手动写点的情况下得到它。此功能应自动运行。

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

我在哪里

在此处输入图像描述

我需要在哪里

在此处输入图像描述

感谢提前。

4

6 回答 6

3

我想你会寻找这样的东西：

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;
}

小提琴

您可以根据自己的喜好调整宽度。

还有另一种使用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;
}

小提琴

在这里，您可以使用内容和字母间距。希望能帮助到你 ：）

于 2014-07-16T09:17:38.223 回答
2 

.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>

于 2020-11-26T21:22:52.517 回答
1

使用绝对定位的 div？段落的白色背景？适用于任何长度的菜单项名称。玩转它，祝你好运！

<div class='item_wrapper'>
    <p class='item_name'>Marinated olives</p>
    <p class='item_price'>4,00€&lt;/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/

于 2014-07-16T09:15:26.873 回答
1

像这样的东西？

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>

提琴手

于 2016-12-30T20:02:55.603 回答
0

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

    #helper{

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

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

于 2014-07-16T09:11:23.077 回答
0

您可以为此使用 css。

如果你只是添加

border: thick dotted;

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

border-bottom: thick dotted;

如果您想要不同的尺寸，您也可以使用 think dotted 或 just dotted。

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

border-bottom: thick dotted orange;

希望这可以帮助 ：）

于 2014-07-16T09:13:47.567 回答