Wie wird die Rahmenhöhe gesteuert?

Question

Ich habe zwei Div, eine auf der linken Seite und die andere ist auf der rechten Seite. Jetzt möchte ich diese zwei div mit einer Grenze zwischen ihnen teilen. Aber die Grenze mit voller Höhe sieht schlecht aus.

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

Answer 1

Ein Rahmen wird immer die gesamte Länge des umschließenden Rechtecks ​​haben (die Höhe des Elements plus seiner Füllung). Er kann nicht gesteuert werden, außer die Höhe des Elements anzupassen, auf das er angewendet wird. Wenn alles, was Sie ist ein vertikaler Teiler benötigen, können Sie konnte Verwendung:

<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 at JS Fiddle, stellen Sie die Höhe der span.container die Grenze 'Höhe' einzustellen.

Oder pseudo-Elemente zu verwenden (::before oder ::after), angesichts der folgenden HTML:

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

Die folgende CSS fügt ein Pseudoelement vor jedem div Element, das die benachbarten Geschwister eines anderen div Elements:

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.

Answer 2

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

Sie können nicht. CSS-Rahmen werden sich immer über die gesamte Höhe/Breite des Elements erstrecken.

Eine Umgehungslösung wäre die Verwendung der absoluten Positionierung (die Prozentwerte annehmen kann), um das bordertragende Element in eine der beiden Divs zu platzieren. Dafür müssten Sie das Element position: relative machen.

Answer 3

Sie könnten ein Bild schaffen, was Höhe, die Sie wünschen, und dann Position, die mit dem CSS-Hintergrund (-Stellung) Immobilien wie:

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

Statt center top Sie auch Pixel oder% wie 50% 100px verwenden können.

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

Answer 4

nicht schlecht .. aber versuchen Sie diesen ... (soll für alle funktioniert, aber sind 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; 
"> 

// Sie können ferner alle anderen Browser zu bearbeiten und hinzufügen ..

Answer 5

Nur line-height

line-height: 10px; 

mit

Answer 6

Ich war nur auf der Suche nach ...Indem ich Davids Antwort benutzte, benutzte ich einen Bereich und gab ihm etwas Polsterung (Höhe funktioniert nicht + obere Randausgabe) ... Funktioniert wie ein Charme;

Siehe fiddle

<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; 
}