Wie zeichne ich eine gepunktete Linie mit CSS?

97

Wie kann ich mit CSS eine gepunktete Linie zeichnen?

html css Kaveh
quelle

Antworten:

131

Beispielsweise:

hr {
  border:none;
  border-top:1px dotted #f00;
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}

Siehe auch Styling <hr>mit CSS .

Sinan Ünür
quelle
3
Da IE 6 (für IE7 kann ich mich nicht erinnern) den "gepunkteten" Stil nicht versteht, können Sie ihm sagen, dass er stattdessen "gestrichelt" verwenden soll, wobei er natürlich bedingte Kommentare verwendet, um auf IE6 und keinen anderen Browser zu zielen.
FelipeAls
Höhe: 0px; funktioniert auf Chrome, da die Ränder von der Höhe getrennt sind.
Ben
Sie sollten verstehen, dass gepunktete, gestrichelte Linien in vielen Browsern unterschiedlich aussehen können. Das hängt eher mit gestrichelten Linien zusammen.
Rantiev
17 
<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />
rahul
quelle
15

Verwenden von HTML:

<div class="horizontal_dotted_line"></div>

und in styles.css:

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
}
Brendan Long
quelle
13

Die akzeptierte Antwort enthält eine Menge Cruft, die für moderne Browser nicht mehr benötigt wird. Ich habe das folgende CSS bereits in allen Browsern bereits im IE8 getestet und es funktioniert einwandfrei.

 hr {
    border: none;
    border-top: 1px dotted black;
  }

border: nonemuss an erster Stelle stehen, um alle Standard-Rahmenstile zu entfernen, die Browser auf hrTags anwenden .

coredumperror
quelle
7

Diese Zeile sollte für Sie funktionieren:

<hr style="border-top: 2px dotted black"/>

quelle
4 
.myclass {
    border-bottom: thin red dotted;
}
Graeme Perrow
quelle
Es ist eine gestrichelte Linie, keine gepunktete.
Rahul
Fest. Ich mischte gepunktet und gestrichelt durch. Außerdem hätte meine Antwort Ihnen eher eine ganze Grenze als eine einzelne Zeile gegeben.
Graeme Perrow
3

Ich habe alle Lösungen hier ausprobiert und keine ergab eine saubere 1px-Leitung. Um dies zu erreichen, gehen Sie wie folgt vor:

border: none; border-top: 1px dotted #000;

Alternative:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
quelle
3

Verwendung wie folgt:

<hr style="border-bottom:dotted" />

quelle
3

Dazu müssen Sie einfach ein border-topoder wie folgt border-bottomzu Ihrem <hr/>Tag hinzufügen :

<hr style="border-top: 2px dotted navy" />

mit jedem gewünschten Linientyp oder jeder gewünschten Farbe


quelle
3

Fügen Sie dem Element, für das Sie eine gepunktete Linie haben möchten, das folgende Attribut hinzu.

style="border-bottom: 1px dotted #ff0000;"
Sarfraz
quelle
2

Mit hrfür mich zwei Linien erstellt, eine durchgezogene und eine gepunktete.

Ich fand, dass dies ziemlich gut funktionierte:

div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}

Da Sie die Breite in Prozent festlegen können, ist auf beiden Seiten immer etwas Platz vorhanden (auch wenn Sie die Fenstergröße ändern).

lachlanjc
quelle
1

Versuchen Sie es gestrichelt ... 

<hr style="border-top: 2px dashed black;color:transparent;"/>
Vibhaas Srivastava
quelle
1

Gepflegte Linie nach Element:

http://jsfiddle.net/korigan/ubtkc17e/

HTML

<h2 class="dotted-line">Lorem ipsum</h2>

CSS

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.dotted-line:after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}
Steven Mouret
quelle