setzen Sie einen Rahmen um header und Absatz

Ich versuche, einen einzelnen Rahmen um die Kopf-und Absatz. Derzeit habe ich zwei separate Rahmen um den header und den Absatz. Wie kann ich einen einfachen Rahmen um Sie herum?

<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>
  • Setzen Sie Sie in einen Behälter und geben Sie dem container die Grenze.
  • Danke Harry-es funktionierte!
InformationsquelleAutor Ninja | 2016-06-14
  1. 2

    Wie Harry oben vorgeschlagen, einfach fügen Sie Sie in einen Umschlag und legen Sie Ihr styling auf der Hülle statt. Etwa so:

    CSS:

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

    HTML:

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

    Alternativ, wenn Sie nicht können oder nicht wollen, ändern Sie Ihr markup, können Sie einfach entfernen Sie die unteren linken und rechten border und border-radius für Ihre h1 element, und auch entfernen Sie den oberen linken und rechten border und border-radius für Ihre p element. Dies wird auch geben das Aussehen, die Sie suchen.

    CSS:

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

    HTML:

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

    • Danke Chris. Könnte ich bitte noch eine Frage? Ich bin versucht, ein Bild auf der linken Seite und Kopf-und Absatz auf der rechten Seite? Wie kann ich zwei Spalten, so wird das Bild auf der linken Seite und die Texte sind auf der rechten Seite?
    • Kein problem! Sichere Sache! Allerdings sollten Sie zuerst markieren Sie diese Frage als gelöst (wenn es ist) und dann nach einer neuen Frage, da ist man über die Grenzen hinweg. Wenn Ihre Frage gepostet wird, teilen Sie den link hier.
    • Ich Tat! Hier der link Chris 🙂 stackoverflow.com/questions/37816500/...
    InformationsquelleAutor Chris
  2. 0

    Oder - wenn Sie nicht legte ein wrapper um ihn schlingt, tun Sie es wie diese:

    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

    InformationsquelleAutor Johannes
  3. 0

    CSS:

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

    HTML:

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

    Nehmen Sie die beiden tags unter einem wrapper und geben die zu erwartenden Grenze. Schauen Sie bitte auf die folgenden:
    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>
    InformationsquelleAutor Md. Ranju Mia
Schreibe einen Kommentar