Issue
I have a simple square with yes or no label as:
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
<div class="textCenter">
<span class="yesNoSquare"></span>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
Now I want to add an "X" inside square so I do something like this:
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
.yesNoSquare-cross {
height: 10px;
width: 10px;
/*background-color: #FA6900;*/
position: relative;
border: 1px solid;
}
.yesNoSquare-cross:after {
position: absolute;
top: -45px;
bottom: 0;
left: 0;
right: 2px;
content: "\2716";
line-height: 100px;
text-align: center;
color: #000000;
}
<div class="textCenter">
<div class="yesNoSquare-cross"></div>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
The problem is that I use div
instead a span
because span did not shown the square correctly, but when I try it, the "X" square does not shown in the same line.
The desire result:
Solution
Just add display: inline-block;
to .yesNoSquare-cross
.
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
.yesNoSquare-cross {
height: 10px;
width: 10px;
/*background-color: #FA6900;*/
position: relative;
border: 1px solid;
display: inline-block;/*the new code*/
}
.yesNoSquare-cross:after {
position: absolute;
top: -45px;
bottom: 0;
left: 0;
right: 2px;
content: "\2716";
line-height: 100px;
text-align: center;
color: #000000;
}
<div class="textCenter">
<div class="yesNoSquare-cross"></div>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
Answered By - iorgu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.