<分区>
html - CSS定位有问题
我有一个元素列表，一个元素一个接一个地显示。我一直在尝试使文本旁边的图像与文本平行显示，但图像似乎几乎悬停在文本上方。 该图像显示了正在显示的内容:
<html>
<head>
<title>Page</title>
<style>
body
{
padding:0px;
margin:0px;
}
.content
{
max-width:947px;
width:100%;
margin:0px auto;
font-family: Tahoma, Geneva, sans-serif;
text-decoration:none;
font-size:15px;
float:left;
}
.full_row
{
float:left;
clear:left;
line-height: 2.5em;
padding:0px;
margin-bottom:5px;
width:100%;
max-width:947px;
}
.first_half_of_row
{
float:left;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
margin-right:15px;
padding:0px;
width:100%;
max-width:240px;
text-align:right;
border:1px solid white;
}
.field_properties
{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 20px;
color: #181818;
font-weight: normal;
float: right;
}
</style>
</head>
<body>
<div class="content">
<div class="full_row">
<div class="first_half_of_row">
<span style="float:right;">
<img style="float:left; margin-right:3px;" src="correct.png" />
<span class="field_properties">User ID</span>
</span>
</div>
</div><br />
<div class="full_row">
<div class="first_half_of_row">
<span style="float:right;">
<img style="float:left; margin-right:3px;" src="error.png" />
<span class="field_properties">Password</span>
</span>
</div>
</div><br />
<div class="full_row">
<div class="first_half_of_row">
<span style="float:right;">
<img style="float:left; margin-right:3px; " src="error.png" />
<span class="field_properties">Confirm Password</span>
</span>
</div>
</div><br />
</div>
</body>
</html>
我希望复选标记和“X”图像显示在文本旁边，而不是略高于文本。这就是我希望图像显示的方式:
最佳答案
从您的样式中删除所有 float
body
{
padding:0px;
margin:0px;
}
.content
{
max-width:947px;
width:100%;
margin:0px auto;
font-family: Tahoma, Geneva, sans-serif;
text-decoration:none;
font-size:15px;
}
.full_row
{
line-height: 2.5em;
padding:0px;
margin-bottom:5px;
width:100%;
max-width:947px;
}
.first_half_of_row
{
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
margin-right:15px;
padding:0px;
width:100%;
max-width:240px;
text-align:right;
border:1px solid white;
}
.field_properties
{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 20px;
color: #181818;
font-weight: normal;
}<div class="content">
<div class="full_row">
<div class="first_half_of_row">
<span>
<img style="margin-right:3px;" src="correct.png" />
<span class="field_properties">User ID</span>
</span>
</div>
</div><br />
<div class="full_row">
<div class="first_half_of_row">
<span>
<img style="margin-right:3px;" src="error.png" />
<span class="field_properties">Password</span>
</span>
</div>
</div><br />
<div class="full_row">
<div class="first_half_of_row">
<span>
<img style="margin-right:3px; " src="error.png" />
<span class="field_properties">Confirm Password</span>
</span>
</div>
</div><br />
</div>关于html - CSS定位有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55322097/