it-swarm.com.de

Rahmenhöhe bei CSS

Ich habe eine Tabelle TD und rechts davon möchte ich einen 1-Pixel-Rand hinzufügen, also habe ich folgendes gemacht:

table td {
    border-right:1px solid #000;
}

Es funktioniert gut, aber das Problem ist, dass die Höhe des Randes die Gesamthöhe des TDs einnimmt.

Gibt es eine Möglichkeit, die Höhe der Grenze festzulegen?

46
Satch3000

Nein, das gibt es nicht. Die Grenze wird immer so groß wie das Element sein.

Sie können den gleichen Effekt erzielen, indem Sie den Inhalt der Zelle in einen <span> umschließen und darauf Höhen-/Randstile anwenden. Oder zeichnen Sie eine kurze vertikale Linie in einem 1 Pixel breiten PNG, die die richtige Höhe hat, und wenden Sie sie als Hintergrund auf die Zelle an:

background:url(line.png) bottom right no-repeat;
49
meagar

Ich habe eine andere Möglichkeit. Dies ist natürlich eine "neuere" Technik, aber für meine Projekte reicht das aus.

Es funktioniert nur, wenn Sie eine oder zwei Ränder benötigen. Ich habe es noch nie mit 4 Grenzen gemacht ... und um ehrlich zu sein, ich kenne die Antwort noch nicht.

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

Ich hoffe, das hilft auch Ihnen, da dies für mich eine einfache Lösung ist.

56
ReBa

Ja, Sie können die Linienhöhe festlegen, nachdem Sie den Rand folgendermaßen definiert haben:

border-right: 1px solid;
line-height: 10px;
47
CairoCoder

Bei td-Elementen können Sie mit der Linienhöhe die Randhöhe wie in SPrince erwähnt ändern. 

Bei anderen Elementen, wie z. B. Listenelementen, können Sie die Randhöhe mit Zeilenhöhe und die Höhe des eigentlichen Elements mit Margin-Top und Margin-Bottom steuern. 

Hier ist ein Arbeitsbeispiel von beiden: http://jsfiddle.net/byronj/gLcqu6mg/

Ein Beispiel mit Listenelementen:

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>
6
Byron

Nein, Sie können die Randhöhe nicht einstellen. 

4
Headshota
table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

Dann können Sie mit Ihrem Code:

<td class="rightborder">whatever</td>

Hoffentlich hilft das!

1
Roy

Dadurch wird links von der Zelle ein zentrierter Rahmen hinzugefügt, der 80% der Höhe der Zelle entspricht. Sie können hier auf die vollständige border-image-Dokumentation verweisen.

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}
0
cambthompson

Nein, nicht ohne Trick. Ränder an Elementen sollen sich über die gesamte Länge der Elementbox erstrecken, auf die sie angewendet werden.

0
cdeszaq

Aufbauend auf der Antwort von @ ReBa oben hat diese custom-border-Klasse für mich funktioniert.

Modifikationen:

  • arbeiten mit borderanstelle vonbackaground-color, da background-color nicht konsistent ist.
  • Setzen Sie height & top der Eigenschaften von :after so, dass die Summe bis 100% reicht, wobei der Wert von bottomimplicit ist.

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}
<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

Viel Glück...

0
Akash

Wie alle anderen gesagt haben, können Sie die Randhöhe nicht steuern. Aber es gibt Problemumgehungen, hier ist was ich tue:

table {
  position: relative;
}

table::before { /* ::after works too */
  content: "";
  position: absolute;
  right: 0; /* Change direction for a different side*/
  z-index: 100; 
  width: 3px; /* Thickness */
  height: 10px;
  background: #555; /* Color */
}

Sie können height für die Höhe der Tabelle auf inherit setzen oder calc(inherit - 2px) für einen 2px kleineren Rahmen. Denken Sie daran, dass inherit keine Auswirkung hat, wenn die Tabellenhöhe nicht festgelegt ist.

Verwenden Sie height: 50% für einen halben Rand.

Demo

0
Simon Sand
.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

// zeichnet eine Linie auf der rechten Seite des Kästchens . fügt später einen oberen Rand und einen unteren Rand hinzu

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

Dies kann beim Zeichnen einer Linie auf der rechten Seite des Kastens mit einer Lücke oben und unten helfen.

0
manjunath vb