圍繞標題和段落的邊框

我試圖在標題和段落周圍放置單個邊框。目前我在標題和段落周圍有兩個單獨的邊框。我怎樣才能把他們周圍的一個單一的邊界？圍繞標題和段落的邊框

<style type="text/css"> 
h1{ 
font-family: consolas; 
border: 2px solid #73AD21; 
border-radius: 25px; 

} 
p{ 
font-family: Consolas; 
border: 2px solid #73AD21; 
border-radius: 25px; 

} 
</style> 

<h1>Hello</h1> 
<p>World</p>

來源

2016-06-14 Ninja

把它們放在一個容器中，讓容器中的邊界。 – Harry

謝謝哈利它工作！ – Ninja

像Harry建議的那樣，只需將它們添加到包裝中，然後在包裝上設置樣式。像這樣：

div { 
 
    font-family: consolas; 
 
    border: 2px solid #73AD21; 
 
    border-radius: 25px; 
 
}

<div> 
 
    <h1>Hello</h1> 
 
    <p>World</p> 
 
</div>

或者，如果你不能或不想改變你的標記，你可以簡單地刪除左下和右下border和border-radius您h1元素，並且還爲您的p元素移除左上和右上的border和border-radius。這也將產生你正在尋找的外觀。

h1, p { 
 
    font-family: consolas; 
 
    border: 2px solid #73AD21; 
 
    border-radius: 25px; 
 
    margin: 0; 
 
    padding: 10px 0; 
 
} 
 

 
h1 { 
 
    border-bottom: 0; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 

 
p { 
 
    border-top: 0; 
 
    border-top-left-radius: 0; 
 
    border-top-right-radius: 0; 
 
}

<h1>Hello</h1> 
 
    <p>World</p>

來源

2016-06-14 15:10:29 Chris

謝謝克里斯。我能再問一個問題嗎？我正在嘗試在左側放置圖像，在右側放置標題和段落？如何創建兩列，使圖像位於左側，文本位於右側？ – Ninja

沒問題！當然可以！雖然你應該首先將這個問題標記爲已解決（如果是），然後發佈一個新問題，因爲這個問題是關於邊界的。一旦你的問題發佈在這裏分享鏈接。 – Chris

我做到了！這裏的鏈接克里斯:) http://stackoverflow.com/questions/37816500/how-can-i-put-image-file-on-the-left-side-and-texts-on-the-right-side – Ninja

或者 - 如果你不能把包裝角落找尋它，像這樣做：

h1 { 
    font-family: consolas; 
    border: 2px solid #73AD21; 
    border-radius: 25px; 
    border-bottom: none; 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
    margin-bottom: 0; 
    padding: 10px; 
} 

p { 
    font-family: Consolas; 
    border: 2px solid #73AD21; 
    border-radius: 25px; 
    border-top: none; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
    margin-top: 0; 
    padding: 10px; 
}

http://codepen.io/anon/pen/yJOwLY

來源

2016-06-14 15:19:56 Johannes

h1{ 
 
font-family: consolas; 
 
} 
 
p{ 
 
font-family: Consolas; 
 
} 
 
.wrapper{ 
 
border: 2px solid #73AD21; 
 
border-radius: 25px; 
 
padding-left: 15px; 
 
padding-right: 15px; 
 
}

<div class="wrapper"> 
 
<h1>Hello</h1> 
 
<p>World</p> 
 
</div>

將這兩個標記放在包裝下，並給出預期的邊界。請對下面來看看： CSS：

<style type="text/css"> 
h1{ 
font-family: consolas; 
} 
p{ 
font-family: Consolas; 
} 
.wrapper{ 
border: 2px solid #73AD21; 
border-radius: 25px; 
padding-left: 15px; 
padding-right: 15px; 
} 
</style>

HTML：

<div class="wrapper"> 
<h1>Hello</h1> 
<p>World</p> 
</div>

來源

2016-06-14 15:52:25

圍繞標題和段落的邊框

回答

相關問題