为什么我的div在一个范围内不能正常工作？ [英] Why doesn't my div inside a span work properly?

问题描述

我正在写下面的 HTML 标记：

 < ;跨度>一些文本
< div id =ch>татат​​а< / div> 
< / span> 
  

和款式：

  span {
 border：1px纯黑色; 
 text-align：center; 
 width：300px; 
 height：300px; 
背景：aqua; 
} 
 #ch {
 width：100px; 
身高：100px 
背景：黄色; 
} 
  

jsFiddle

1. 为什么高度属性不适用于 span 内部的 div 元素，但会应用宽度


2. 为什么我的 span 的右边框缺失？

解决方案

你的标记是不正确的（加上缺少的分号如Steini所引用的，提及这是为了完整答案）

答案： span 是 inline 元素，所以在 span 中有一个 div 是个好主意，如果嵌套 span 内部 span 并给出内部跨度 display：block property！ p>

答案2 ：添加 display：block to span 更改默认行为





正确标记的工作小提琴 p>

摆弄你想要的布局

I'm writing the following HTML markup:

<span> Some Text
    <div id="ch">татата</div>
</span>

and styles:

span{
    border: 1px solid black;
    text-align:center;
    width: 300px;
    height: 300px;
    background: aqua;
}
#ch{
    width:100px;
    height:100px
    background: yellow;   
}

jsFiddle

1. Why is the height property not applied to a div element which inside the span, but width is applied?
2. Why is the right border of my span is missing?

解决方案

Your markup is incorrect ( plus missing semi-colon as quoted by Steini, mentioning this for sake of completeness of answer )

Answer 1 : span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property!

Answer 2 : add display:block to span to change the default behavior

working fiddle with correct markup

fiddle with the layout you wanted

这篇关于为什么我的div在一个范围内不能正常工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！