Html 如何移动p标记'；它的位置向上而不是在底部？_Html_Css

Html 如何移动p标记'；它的位置向上而不是在底部？

html css

Html 如何移动p标记'；它的位置向上而不是在底部？,html,css,Html,Css,这是JSFIDLE示例。我想移动p标记，使其在顶部内联显示，而不是在底部 <!DOCTYPE html> <html> <head> <style> div { display: inline; } p { border-bottom: 6px solid red; background-color: lightgrey; padding: 10px; max-width: 100px; displ

这是JSFIDLE示例。我想移动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>


div{
显示：内联；
}
p{
边框底部：6px实心红色；
背景颜色：浅灰色；
填充：10px；
最大宽度：100px；
显示：内联块；
右边距：10px；
最大高度：200px；
字体系列：“Arial”；
}
p:悬停{
背景色：#中交；
光标：指针；
}
此属性是边框底部宽度、边框底部样式和边框底部颜色的速记属性
此属性是边框底部宽度、边框底部样式和边框底部颜色的速记属性
此属性是边框底部宽度的速记属性

看起来您只想使用

垂直对齐

属性，设置为

顶部

div{
显示：内联；
}
p{
边框底部：6px实心红色；
背景颜色：浅灰色；
填充：10px；
最大宽度：100px；
显示：内联块；
右边距：10px；
最大高度：250px；
字体系列：“Arial”；
垂直对齐：顶部；
}
p:悬停{
背景色：#中交；
光标：指针；
}


此属性是边框底部宽度、边框底部样式和边框底部颜色的速记属性
此属性是边框底部宽度、边框底部样式和边框底部颜色的速记属性
此属性是边框底部宽度的速记属性

看起来您只想使用

垂直对齐

属性，设置为

顶部

div{
显示：内联；
}
p{
边框底部：6px实心红色；
背景颜色：浅灰色；
填充：10px；
最大宽度：100px；
显示：内联块；
右边距：10px；
最大高度：250px；
字体系列：“Arial”；
垂直对齐：顶部；
}
p:悬停{
背景色：#中交；
光标：指针；
}


此属性是边框底部宽度、边框底部样式和边框底部颜色的速记属性
此属性是边框底部宽度、边框底部样式和边框底部颜色的速记属性
此属性是边框底部宽度的速记属性

只需使用

垂直对齐：顶部用于此
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 {
    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;
}

更新小提琴演示