<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
text-align: right;
}
</style>
</head>
<body>
<span class="right">test</span>
</body>
</html>
我希望“測驗”顯示在右側，但它不起作用。如果我將跨度更改為 div，它會起作用。這是為什么？我想要跨度，但不是 div。在以下示例中，我希望“姓名”顯示在頁面右側，但與“年齡”位于同一行。但是“span”標簽不起作用。
<span>age</span> <span class="right">name</span>
uj5u.com熱心網友回復：
所述<span>元素是內嵌容器和它占據基于內容的空間。其中 as<div>是一個塊元素，它完全占據了容器。因此，如果您希望它與span您一起使用，則可以設定display: block：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
text-align: right;
display: block;
}
</style>
</head>
<body>
<span class="right">test</span>
</body>
</html>或者您可以使用float代替text-align跨度
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
float: right;
}
</style>
</head>
<body>
<span class="right">test</span>
</body>
</html>與第二個示例相同：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
float: right;
}
</style>
</head>
<body>
<span>age</span> <span class="right">name</span>
</body>
</html>uj5u.com熱心網友回復：
span是一個行內元素。它的寬度就是它的內容的寬度。所以當 的內容span向右對齊時，它是不明顯的。
div另一方面，s 是塊元素，將跨越容器的寬度。
如果你想span右對齊，你應該把它包裹在 a 中div并應用text-align:right到它：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
text-align: right;
width:100%;
}
</style>
</head>
<body>
<div class="right"><span>test</span></div>
</body>
</html>uj5u.com熱心網友回復：
原因是因為 a<div>具有默認display屬性block，但<span>具有默認display屬性inline。
將您的.right課程更改為包含display: block;，它將對兩者都有效。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
display: block;
text-align: right;
}
</style>
</head>
<body>
<span class="right">test</span>
</body>
</html>
<span>檔案：https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/span
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/344983.html
標籤：html