我怎样才能让我的 css 边框一直环绕我的 html 代码？

Question

I am having an issue with a border all the way around my HTML text using CSS.

How can I get the border to go around the text completely instead of going through the text?

My HTML and CSS code is the following:

 .header2 { position: relative; float: left; height: 75px; width: 1250px; background-color:white; left: 50px; top: 45px; margin-top: none; word-spacing: 25px; font-size: 14; border: 1px solid black; }

 <div class = "header2"> <h1>News</h1> <h2> <a href="#" class="H"><span>Home</span></a> <a href="#" class="N"><span>Caronavirus</span></a> <a href="#" class="S"><span>Video</span></a> <a href="#" class="R"><span>World</span></a> <a href="#" class="W"><span>US Canada</span></a> <a href="#" class="T"><span>Uk</span></a> <a href="#" class="F"><span>Business</span></a> <a href="#" class="C"><span>Tech</span></a> <a href="#" class="M"><span>Science</span></a> <a href="#" class="M"><span>Stories</span></a> <a href="#" class="M"><span>More</span></a> </h2> </div>

The results are the border interrupting the text at the bottom, rather than wrapping around it.

Answer 1

You defined height as 75px , which simply isn't high enough, ie higher than the contents. Change that to auto to automatically adjust the height (and with it the border) to the contents:

 .header2 { position: relative; float: left; height: auto; width: 1250px; background-color:white; left: 50px; top: 45px; margin-top: none; word-spacing: 25px; font-size: 14; border: 1px solid black; }

 <div class = "header2"> <h1>News</h1> <h2> <a href="#" class="H"><span>Home</span></a> <a href="#" class="N"><span>Caronavirus</span></a> <a href="#" class="S"><span>Video</span></a> <a href="#" class="R"><span>World</span></a> <a href="#" class="W"><span>US Canada</span></a> <a href="#" class="T"><span>Uk</span></a> <a href="#" class="F"><span>Business</span></a> <a href="#" class="C"><span>Tech</span></a> <a href="#" class="M"><span>Science</span></a> <a href="#" class="M"><span>Stories</span></a> <a href="#" class="M"><span>More</span></a> </h2> </div>

Answer 2

The problem is the height of your header div is an absolute value (px) and 75px is shorter than your links.

You can fix the border going through the links by increasing the height of the header class.

For example:

.header2 {
  position: relative;
  float: left;
  height: 120px;
  width: 1250px;
  background-color: white;
  left: 50px;
  top: 45px;
  margin-top: none;
  word-spacing: 25px;
  font-size: 14;
  border: 1px solid black;
}