Wie zeichne ich eine gepunktete Linie mit CSS?

97

Wie kann ich mit CSS eine gepunktete Linie zeichnen?

html css

— Kaveh
quelle

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

Meinen Sie so etwas wie "Rand: 1px schwarz gepunktet"?

w3schools.com Referenz

— ChssPly76
quelle

7

Diese Zeile sollte für Sie funktionieren:

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

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" />

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

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