it-swarm.com.de

Wie steuere ich die Randhöhe?

Ich habe zwei div, eine links und die andere rechts. Jetzt möchte ich diese beiden Div mit einer Grenze zwischen ihnen teilen. Aber der Rand mit voller Höhe sieht schlecht aus.

Ich möchte die Höhe der Grenze kontrollieren. Wie könnte ich das machen?

21
Jichao

Ein Rand befindet sich immer auf der gesamten Länge des umschließenden Felds (Höhe des Elements plus Auffüllung). Er kann nur gesteuert werden, wenn die Höhe des Elements angepasst wird, auf das er angewendet wird. Wenn Sie nur einen vertikalen Teiler benötigen, können Sie verwenden :

<div id="left">
  content
</div>
<span class="divider"></span>
<div id="right">
  content
</div>

Mit CSS:

span {
 display: inline-block;
 width: 0;
 height: 1em;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

Demo bei JS Fiddle , stellen Sie die Höhe des span.container, um die Rahmenhöhe anzupassen.

Oder um Pseudoelemente (::before oder ::after) mit folgendem HTML:

<div id="left">content</div>
<div id="right">content</div>

Das folgende CSS fügt ein Pseudoelement vor jedem div -Element ein, das das benachbarte Geschwister eines anderen div -Elements ist:

div {
    display: inline-block;
    position: relative;
}

div + div {
    padding-left: 0.3em;
}

div + div::before {
    content: '';
    border-left: 2px solid #000;
    position: absolute;
    height: 50%;
    left: 0;
    top: 25%;
}

JS Fiddle Demo .

37
David Thomas

Nur mit line-height

line-height: 10px;

enter image description here

11

Ich habe nur danach gesucht ... Unter Verwendung von Davids Antwort habe ich eine Spanne verwendet und ihr eine Polsterung gegeben (Höhe funktioniert nicht + Problem mit dem oberen Rand) ... Funktioniert wie ein Zauber;

Siehe Geige

<ul>
  <li><a href="index.php">Home</a></li><span class="divider"></span>
  <li><a href="about.php">About Us</a></li><span class="divider"></span>
  <li><a href="#">Events</a></li><span class="divider"></span>
  <li><a href="#">Forum</a></li><span class="divider"></span>
  <li><a href="#">Contact</a></li>
</ul>

.divider {
    border-left: 1px solid #8e1537;
    padding: 29px 0 24px 0;
}
1

nicht schlecht .. aber probier mal dieses ... (sollte für alle funktionieren aber ist nur -webkit enthalten)

<br>
<input type="text" style="
  background: transparent;
border-bottom: 1px solid #B5D5FF;
border-left: 1px solid;
border-right: 1px solid;
border-left-color: #B5D5FF;
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat;
">

// Fühlen Sie sich frei, alle anderen Browser zu bearbeiten und hinzuzufügen.

Ich möchte die Höhe der Grenze kontrollieren. Wie könnte ich das machen?

Das kannst du nicht. CSS-Rahmen erstrecken sich immer über die gesamte Höhe/Breite des Elements.

Eine Problemumgehungsidee wäre die Verwendung der absoluten Positionierung (die Prozentwerte akzeptieren kann), um das randtragende Element in einem der beiden Divs zu platzieren. Dafür müssten Sie das Element position: relative.

0
Pekka 웃

Sie können ein Bild in beliebiger Höhe erstellen und dieses dann mit der CSS-Eigenschaft background (-position) wie folgt positionieren:

#somid { background: url(path/to/img.png) no-repeat center top;

Anstelle von center top Können Sie auch Pixel oder% wie 50% 100px Verwenden.

http://www.w3.org/TR/CSS2/colors.html#propdef-background-position

0
DanMan