如何控制邊界高度？

Question

我有兩個div，一個在左邊，另一個在右邊。現在我想把這兩個div分隔開來。但全高的邊界看起來很糟糕。

我想控制邊框的高度。我怎麼能這樣做？

Answer 1

邊框將始終位於包含框的整個長度（元素的高度加上其填充），除調整要應用的元素的高度外，無法控制邊框。如果你需要的是一個垂直分隔線，你能使用：

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

用CSS：

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

Demo at JS Fiddle，調整span.container的高度調整邊框 '高度'。

或者，要使用僞元素（::before或::after），給出下面的HTML：

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

下面的CSS任何div元件是另一div元件的相鄰的兄弟之前增加了一個僞元素：

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

我想控制邊框的高度。我怎麼能這樣做？

你不行。 CSS邊框將始終跨越元素的整個高度/寬度。

一個解決方法的想法是使用絕對定位（可以接受百分比值）將邊界攜帶元素放置在兩個div中的一箇中。爲此，您必須製作元素position: relative。

Answer 3

你可以創建你所希望的任何高度的圖像，然後立場與CSS背景（位置），屬性，如：

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

相反的center top你也可以使用像素或類似％50% 100px。

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

Answer 4

不壞..但嘗試這樣的產品......（應該適用於所有，但IST只是-webkit含稅）

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

//隨意編輯和添加其他所有瀏覽器..

Answer 5

使用line-height

line-height: 10px; 

只有

Answer 6

我只是在找這個......通過使用大衛的回答，我用了一段時間，並給了它一些填充（高度將不起作用+頂邊的問題）......像魅力一樣工作;

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