CSS need inline element to appear next to { display: block; } element
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 (know开发者_JAVA技巧n) size of the button seems wrong and dirty.
Suggestions?
<a class="btn normal" style="float: left;">Push Me</a><input type="checkbox">
<br style="clear: both;">
<a class="btn normal">Push Me Too</a>
If you must keep the anchor a block element, set float: left to it. Don't forget to add
<div style="clear: both;"></div>
after the checkbox.
Add in two more css classes
.floatingButton{
float:left;
}
.aCheckbox {
xclear:left;
}
Then
<a class="btn normal floatingButton">Push Me</a><input class="aCheckbox" type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
Should do the trick
Can you do something like this with the access that you do have?
<div style="width: 150px;">
<input type="checkbox" style="float: right;">
<a class="btn normal">Push Me</a>
</div>
Just apply a float: left to the first a tag.
The easiest possible way to get the checkbox beside the button while preserving the button's block styling would be to set the button's display property to inline-block. Surprisingly, using display: inline-block in this scenario will work in all modern browsers and IE 6 and above. inline-block is a little-known but highly useful property.
加载中,请稍侯......
精彩评论