Issue
My border keeps stretching whenever I center the text in the middle. I want the border to be just around the text not around the whole middle area.
Here is my code:
#EnterHouse {
text-align: center;
font-weight: bold;
font-size: x-large;
position: fixed;
bottom: 0;
margin-bottom: 25px;
overflow: hidden;
border: 10px solid black;
background-color: black;
display: inline-block;
}
#EnterHouse {
float: left;
width: 100%;
}
#EnterHouse a {
text-decoration: none;
color: orange;
}
#EnterHouse a:hover {
color: red;<body>
<div id="IKWYDLH">Example</div>
<div id="EnterHouse"><a href="Index.html">Hello World</div></a>
</body>Solution
You can nest the text in a span. Remove the border from #EnterHouse and use padding to give it some extra height. Then just set the border on the span element.
#EnterHouse {
text-align: center;
font-weight: bold;
font-size: x-large;
position: fixed;
bottom: 0;
margin-bottom: 25px;
overflow: hidden;
padding: 10px;
background-color: black;
display: inline-block;
}
#EnterHouse {
float: left;
width: 100%;
}
#EnterHouse a {
text-decoration: none;
color: orange;
}
#EnterHouse a:hover {
color: red;
}
span {
border: 1px solid red;
}<body>
<div id="IKWYDLH">Example</div>
<div id="EnterHouse"><a href="Index.html"><span>Hello World</span></a></div>
</body>Answered By - カメロン
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.