爲什麼我的文本顯示爲格外？

我無法弄清楚什麼是錯誤的，我期望從下面的代碼是文本應該顯示在div中，這是由藍色背景和邊界標記，但它顯示在div下面，爲什麼發生？爲什麼我的文本顯示爲格外？

.item-header { 
 
    background-color: rgb(0, 246, 246); 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    border-style: double; 
 
    height: 20px; 
 
} 
 

 
.alignleft { 
 
    background: transparent; 
 
    float: left; 
 
    width: 150px; 
 
} 
 

 
.alignright { 
 
    background: transparent; 
 
    float: right; 
 
}

<div class="item-header"> 
 

 
    <p class="alignleft">Author: {{post.author}}</p> 
 
    <p class="alignright" (click)="ratingEditorClicked()">bias :{{post.bias_rating}}/5 
 
    <ion-icon name="create" item-right></ion-icon> 
 
    </p> 
 

 
</div>

來源

2017-04-12 Utsav Gupta

清除你的花車。 – Abhitalks

首先，你需要從.item-header{ 刪除height那麼另一個問題是浮動。如果你在元素內部漂浮元素，它會降低高度。一種解決方法是清除與僞元素（:after）彩車，看看：

.item-header:after { 
    content: ''; 
    display: block; 
    clear: both; 
}

.item-header{ 
 
    background-color: rgb(0,246,246); 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    border-style: double; 
 
    /*height: 20px;*/ 
 
} 
 

 
.item-header:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.alignleft { 
 
    background: transparent; 
 
    float: left; 
 
    width: 150px; 
 
} 
 
.alignright { 
 
    background: transparent; 
 
    float: right; 
 
}

<div class="item-header" > 
 

 
    <p class="alignleft">Author: {{post.author}}</p> 
 
    <p class="alignright" (click)="ratingEditorClicked()">bias :{{post.bias_rating}}/5 
 
    <ion-icon name="create" item-right ></ion-icon> 
 
    </p> 
 

 
</div>

來源

2017-04-12 07:11:09 caramba

在現實中，它實際上是。這是因爲你正在對.item-header中的height進行硬編碼，看起來像這樣。

如果您使用display:inline-block，文本將進入div。

JSFiddle with example fixed

來源

2017-04-12 07:12:46

因爲內的div是float。並且您已經在.item標題中設置了20px of height

您需要在這些類型的設計中使用clearfix hack。

.item-header { 
 
    background-color: rgb(0, 246, 246); 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    border-style: double; 
 

 
} 
 

 
.alignleft { 
 
    background: transparent; 
 
    float: left; 
 
    width: 150px; 
 
} 
 

 
.alignright { 
 
    background: transparent; 
 
    float: right; 
 
} 
 

 
.clearfix { 
 
    clear: both; 
 
    position: relative; 
 
    background-color: red; 
 
}

<div class="item-header"> 
 

 
    <p class="alignleft">Author: {{post.author}}</p> 
 
    <p class="alignright" (click)="ratingEditorClicked()">bias :{{post.bias_rating}}/5 
 
    <ion-icon name="create" item-right></ion-icon> 
 
    </p> 
 
    <div class='clearfix'/> 
 

 
</div>

來源

2017-04-12 07:18:38 NetVicious

通過你的CSS類，你要我asume，除了在藍色框中的文本的名稱，該p.alignleft排列在同一行中留下的列關於p.alignright如果是的話，你也可以這樣做：

demo here

來源

2017-04-12 07:24:56 AXL

爲什麼我的文本顯示爲格外？

回答

相關問題