demoncoder demoncoder - 3 months ago 10
CSS Question

is it correct if <div> inside <a>? in HTML 5 doc

I need the div to be inside a.
But I not sure whether I am doing correct or not.
Or actually there is another way to do it?
I need my button to be skew, but it affect the text inside the button skew too.
so I need div to make it not skew.
I try span, but I can't make it.
Any advice?
Thank you.

jsfiddle here: https://jsfiddle.net/rae0724/syogbe7b/

<a class="btn" href="javascript:void(0)"><div class="txtt">button</div></a>

.btn {
font-size: 16px;
width: auto;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 4px 20px;
border: none;
color: #fff;
-o-text-overflow: clip;
text-overflow: clip;
background: #000;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
text-align: center;
display: inline-block;
}

.txtt {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
}

Answer

I wouldn't recommend using a div inside an a tag.

Further You can, instead, use the span tag by using the following code in your CSS:

.txtt {
  display: inline-block;
}

For a further explanation on div inside an a tag, you can refer to this
SO answer.

Code Snippet

.btn {
  font-size: 16px;
  width: auto;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 4px 20px;
  border: none;
  color: #fff;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #000;
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  text-align: center;
  display: inline-block;
}
.txtt {
  display: inline-block;
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}
<a class="btn" href="javascript:void(0)"><span class="txtt">button</span></a>

Comments