Question

我有一个显示在另一个下面的项目列表。我一直在尝试使文本旁边的图像显示与文本平行，但似乎图像几乎悬停在文本上方。该图显示了正在显示的内容：

original display

<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”图像显示在文本旁边，而不是文本上方。这就是我要显示图像的方式：

this is how list should look like

Answer 1

从您的样式中删除全部个float

See example

        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>

CSS定位有问题

1 个答案: