我用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属性仅适用于给定元素中的文本。
当我在fieldset中设置text-align:right;时，我希望表单中的所有文本都移动到页面的右侧。
那么，为什么即使属性涉及文本，input元素也会向右移动呢？
不完全是。
text-align属性描述内联内容在其父块元素中的对齐方式。
文本是内联内容的一个示例，但这也适用于其他内联元素。
输入元素是内联元素，因此它们受文本对齐 CSS 属性的影响。
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
如果只是尝试对齐标签元素，则可以在 CSS 中指定字段集标签 { }。
text-align属性将影响块级元素的所有文本内容，以及display: inline和display: inline-block元素。 默认情况下，<input>元素是内联元素，因此它受父字段集的text-align属性的影响。
请参阅本文： https://css-tricks.com/almanac/properties/t/text-align/
注意默认为display: inline的元素以这种方式默认，因为 CSS 设计者希望它们与文本混合在一起，这也可能会有所帮助。 因此，如果它们不像案文那样对齐，那就没有意义了。