如何將p標籤的位置向上移動而不是位於底部？

這是JSFiddle示例。我想移動p標籤，使其在頂部而不是在底部顯示。如何將p標籤的位置向上移動而不是位於底部？

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    display: inline; 
} 

p { 
    border-bottom: 6px solid red; 
    background-color: lightgrey; 
    padding: 10px; 
    max-width: 100px; 
    display: inline-block; 
    margin-right: 10px; 
    max-height: 200px; 
    font-family: "Arial"; 
} 

p:hover { 
    background-color: #CCCCCC; 
    cursor: pointer; 
} 
</style> 
</head> 
<body> 
<div> 
    <p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p> 

    <p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p> 

    <p>This property is a shorthand property for border-bottom-width.</p> 
</div> 

</body> 
</html>

https://jsfiddle.net/om7orw9w/

來源

2017-03-29 Monil

看起來你只是想使用vertical-align屬性設置爲top

div { 
 
\t display: inline; 
 
} 
 

 
p { 
 
    border-bottom: 6px solid red; 
 
    background-color: lightgrey; 
 
    padding: 10px; 
 
    max-width: 100px; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    max-height: 250px; 
 
    font-family: "Arial"; 
 
    vertical-align: top; 
 
} 
 

 
p:hover { 
 
\t background-color: #CCCCCC; 
 
    cursor: pointer; 
 
}

<div> 
 
    <p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p> 
 
    
 
    <p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p> 
 
    
 
    <p>This property is a shorthand property for border-bottom-width.</p> 
 
</div>

來源

2017-03-29 16:55:17

只需使用vertical-align: top;這個

p { 
    border-bottom: 6px solid red; 
    background-color: lightgrey; 
    padding: 10px; 
    max-width: 100px; 
    display: inline-block; 
    margin-right: 10px; 
    max-height: 250px; 
    font-family: "Arial"; 
    vertical-align: top; 
}

for updated小提琴演示click here

來源

2017-03-29 16:56:23

如何將p標籤的位置向上移動而不是位於底部？

回答

相關問題