Question

这是JSFiddle的例子。我想移动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/

Answer 1

您似乎只想使用vertical-align属性，设置为top

＆＃13;

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: 250px;
    font-family: "Arial";
    vertical-align: top;
}

p:hover {
	background-color: #CCCCCC;
    cursor: pointer;
}

＆＃13;

<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>

＆＃13;

Answer 2

只需使用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;
}

更新小提琴演示click here

如何将p标签的位置向上移动而不是在底部？

2 个答案: