项目之间的点线

时间:2014-07-16 09:04:42

标签: css line between dotted-line

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

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

我在哪里

enter image description here

我需要的地方

enter image description here

感谢您提前。

6 个答案:

答案 0 :(得分:4)

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

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

在这里,您可以播放内容和字母间距。希望它有所帮助:)

答案 1 :(得分:1)

使用绝对定位的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/

答案 2 :(得分: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>

JsFiddle

答案 3 :(得分:0)

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

    #helper{

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

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

答案 4 :(得分:0)

你可以使用css。

如果您只是添加

border: thick dotted;

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

border-bottom: thick dotted;

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

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

border-bottom: thick dotted orange;

希望这会有所帮助:)

答案 5 :(得分:0)

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