0
我的子元素有一個20px
和height
下面的CSS:爲什麼我的內聯塊跨度不能繼承高度?
display: inline-block;
text-align: right;
width: 67px;
height: inherit;
父元素具有的47px
一個height
。
爲什麼我的元素繼承這個高度?
HTML
<div class='tango-directive-template'>
<div class='tango level-{{ level }}'>
<span class='left-icons'>
<img
ng-show='tango.children.length > 0'
src='/assets/images/show-arrow.png'>
<span class='author'>A</span>
</span>
<textarea
ng-focus='focus = true;'
ng-blur='focus = false;'
rows='1'>{{ tango.text }}</textarea>
<p class='menu' ng-show='focus'>
<span class='glyphicon glyphicon-indent-left'></span>
<span class='glyphicon glyphicon-indent-right'></span>
<span class='glyphicon glyphicon-arrow-down'></span>
<span class='glyphicon glyphicon-arrow-right'></span.
</p>
</div>
<tango
ng-repeat='subtango in tango.children'
tango='subtango'
level='{{ +level + 1 }}'>
</tango>
</div>
CSS
.tango-directive-template .tango {
margin-bottom: 20px;
}
.tango-directive-template .tango .left-icons {
display: inline-block;
text-align: right;
width: 67px;
height: inherit;
}
.tango-directive-template .tango .left-icons img, .tango-directive-template .tango .left-icons .author {
position: relative;
bottom: 15px;
margin-right: 5px;
}
.tango-directive-template .tango .left-icons img {
height: 20px;
}
.tango-directive-template .tango .left-icons .author {
border: 1px solid gray;
border-radius: 25px;
padding: 10px;
}
.tango-directive-template .tango textarea {
font-size: 18px;
width: 700px;
line-height: 135%;
padding: 8px 16px;
resize: none;
border: 1px solid white;
overflow: hidden;
}
.tango-directive-template .tango textarea:focus {
outline: none;
border: 1px solid gray;
overflow: auto;
}
.tango-directive-template .tango .menu {
width: 750px;
}
.tango-directive-template .tango .menu span {
float: right;
margin-left: 15px;
cursor: pointer;
}
.tango-directive-template .level-0 {
position: relative;
left: 0px;
}
.tango-directive-template .level-1 {
position: relative;
left: 65px;
}
.tango-directive-template .level-2 {
position: relative;
left: 130px;
}
.tango-directive-template .level-3 {
position: relative;
left: 195px;
}
.tango-directive-template .level-4 {
position: relative;
left: 260px;
}
.tango-directive-template .level-5 {
position: relative;
left: 325px;
}
.tango-directive-template .level-6 {
position: relative;
left: 390px;
}
.tango-directive-template .level-7 {
position: relative;
left: 455px;
}
.tango-directive-template .level-8 {
position: relative;
left: 520px;
}
.tango-directive-template .level-9 {
position: relative;
left: 585px;
}
.tango-directive-template .level-10 {
position: relative;
left: 650px;
}
我想是當textarea的大小調整圖像垂直居中。
嗨,亞當,我編輯你的標題,以優化它的搜索(因爲這個問題是關於繼承比關於一個特定的元素更多)。如果您不喜歡該調整,則只需恢復原始內容即可。 –
@Michael_B我改回來了。原始文件和修訂版都指定了繼承。但原文還指定我正在處理內嵌塊元素,這很重要。 –