I'm trying to introduce a checkbox next to another element. The problem is that the a element has been made a "block" by the CSS so that it appears at the correct height and width. Being a block, I can't simply put another element next to it and hope it shows up there -- it shows up just below it.
A self-contained sample is shown below.
<html>
<head>
<style type='text/css'>
/* I don't have control over this */
a.btn {
background-color: #B35905;
color: #E6D389;
text-decoration: none;
font-weight: bold;
text-align: center;
display: block;
border: none;
cursor: pointer;
}
.normal{
line-height: 20px;
font-size: 12px;
height: 20px;
width: 125px;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- I have some control over this -->
<a class="btn normal">Push Me</a><input type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
</body>
</html>
So what I'm looking for is the checkbox to appear immediately to the right of the element, but without having to completely muck up the styling of the button. Absolute positioning of the checkbox using the (known) size of the button seems wrong and dirty.
Suggestions?