Multi-Line Button Unequal Line Width

HTML & CSS
1

Hi

I want to use only CSS and I want a button to appear on 2 lines as:

Please add to
Mailing List

My problem is that I want the background colour on the second line to be the same width as the background colour on the longer first line. At the moment, the background colour on the second line stops at the end of “List”.

I (hopefully) have attached an image of what I am after

Any help would be appreciated

.mailing-list a:link,
.mailing-list a:visited,
.mailing-list a:hover,
.mailing-list a:active {
background-color: #663300;
color: #FFFFFF;
font: “Courier New”, monospace;
text-decoration: underline;
}

<div class=“mailing-list”>
<a href=“mail_list.htm”> Please add to</br> Mailing List </a>
</div>

2

Hi, that’s because as an inline element, it doesn’t generate a block and since it’s an inline element it will only wrap around the content inside it…Give the anchor display:inline-block to make it a block (there are many other ways this can be fixed )

3

You’re welcome :). Glad to help.

4

Thanks for prompt reply.
It worked!