Question

我在HTML和CSS中生成了以下代码

		* {
			font-family: Arial, Verdana, sans-serif;
			color: #665544;
		}
		input {
			border-bottom: 1px dotted #dcdcdc;
			border-top: none;
			border-right: none;
			border-left: none;
			padding: 5px;
			width: 280px;
			margin-bottom: 20px;
		}
		input:focus {
			border: 1px dotted #dcdcdc;
			outline: none;
		}
		input#submit {
			color: #ffffff;
			background-color: #665544;
			border: none;
			border-radius: 5px;
			width: 80px;
		}
		input#submit:hover {
			color:#665544;
			background-color: #efefef;
		}
		fieldset {
			width: 350px;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
			padding: 10px 20px;
			text-align: right;
		}
		legend {
			background-color: #efefef;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
			padding: 10px 20px;
			text-align: left;
			text-transform: uppercase;
		}

<!DOCTYPE html>
<html>
<head>
	<title>Styling Fieldsets and Legends</title>
</head>
<body>
	<form>
		<fieldset>
			<legend>Newsletter</legend>
			<label for="name">Name: </label><input type="text" id="name" />
			<label for="email">Email: </label><input type="text" id="email" />
			<input type="submit" value="Subscribe" id="submit" />
		</fieldset>
	</form>
</body>
</html>

现在我感到困惑的是text-align属性。

我认为text-align属性仅适用于给定元素中的文本。

当我在text-align:right;中设置fieldset时，我希望表单中的所有文字都移到页面右侧。

那么为什么即使属性涉及文本，input元素也会向右移动？

Answer 1

不完全是。

text-align属性描述了内联内容在其父块元素中的对齐方式。

Text是内联内容的示例，但这也适用于其他内联元素。

Answer 2

display: inline属性将影响块级元素的所有文本内容，以及display: inline-block和<input>元素。默认情况下，您的text-align元素是内联元素，因此它受父字段集的display: inline属性的影响。

请参阅此文章：https://css-tricks.com/almanac/properties/t/text-align/

注意默认为{{1}}的元素也是默认的，因为CSS设计者希望它们与文本一致。因此，如果它们不像文本那样对齐就没有意义。

Answer 3

输入元素是内联元素，因此它们受text-align CSS属性的影响。

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

如果您只是尝试对齐标签元素，则可以在CSS中指定fieldset label {}。

对`<fieldset>`中的输入元素进行css`text-align`

3 个答案: