Question

我的html代码是

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        .ars{
            width: 350px;
            height:40px;
            font-size: 20px;
            text-align: left;
            padding-left: 100px;
            vertical-align: top;
        }
        .ams{
            vertical-align: top;
            padding-left: 8px;
        }
    </style>
<table>
  <tr> 
    <td class="ars">1. District</td> 
    <td class="ams">:<a style="padding-left: 8px;"> ktm qwerty</a></td>
     </tr>
      <tr> 
     <td class="ars">2. Station</td>
     <td class="ams">:<a style="padding-left: 8px;"> new york city</a></td> 
     </tr> 

     <tr> 
     <td class="ars">3. Date & Time </td>
       <td class="ams">:<a style="padding-left: 8px;">01-01-2018 </a></td> 
    </tr>

     <tr> 
     <td class="ars">3. Particulars of  search</td>
     </tr>
     <tr> 
     <td class="ars">&emsp;a)What are you wearing</td>
     <td>: <a style="padding-left: 8px;">no</a> </td> 
     </tr> 
     <tr> 
     <td class="ars">4. The email id you are using and the corresponding address and phone number along with fathers name</td>
     <td>:</td> 
       </tr>
  </table>
</body>
</html>

问题是，没有。 4，多行文本未对齐。应该是

4. The email id you are using and the corresponding address and phone number 
   along with fathers name

文本不应低于数字4。多行文本应有一个空白。我不一样了...有人可以帮我解决问题吗？

Answer 1

由于html将<td>标记内的内容作为全部内容，因此该文本位于数字4下方。它无法区分4和The email id you are using and the corresponding address and phone number along with fathers name。我建议拥有序列号。作为另一个<td>标签的一部分。

Answer 2

我希望它可以帮助您

    <ListView Name="lvUsers" FontSize="25" FontFamily="Arial">
        <ListView.View>
            <GridView ColumnHeaderContainerStyle="{StaticResource myHeaderStyle}">
              <GridViewColumn DisplayMemberBinding="{Binding CountryName}" />
              <GridViewColumn DisplayMemberBinding="{Binding Indicator}" />
            </GridView>
         </ListView.View>
   <ListView.GroupStyle>
   <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <TextBlock FontWeight="Bold" Text="{Binding Indicator}" FontSize="30"  FontFamily="Arial" Foreground="Black"/>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
   </ListView.GroupStyle>
   </ListView>

   .ars {
      width: 350px;
      height: 40px;
      font-size: 20px;
      text-align: left;
      padding-left: 100px;
      vertical-align: top;
    }
    
    .ams {
      vertical-align: top;
    }
    
    .test {
      margin-top: -23px;
      margin-left: 20px;
    }

Answer 3

我为您更新了小提琴。请在https://jsfiddle.net/ph8b2d34/11/

上找到它

.ars1 {
    padding-left: 120px;
    position: relative;
}
.ars1:before {
    content: '4.';
    position: absolute;
    font-size: 20px;
    margin-right: 10px;
    left: 100px;
 }

<td class="ars ars1">The email id you are using and the corresponding address and phone number along with fathers name</td>

Answer 4

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
    td{
    vertical-align: top;
    }

        .ars{
            width: 350px;
            height:40px;
            font-size: 20px;
            text-align: left;
            padding-left:px;
            vertical-align: top;
        }
        .ams{
            vertical-align: top;
            padding-left: 8px;
        }
    </style>
<table>
  <tr> 
    <td width="30px">1.</td>  
    <td class="ars">District</td> 
    <td class="ams">:<a style="padding-left: 8px;"> ktm qwerty</a></td>
     </tr>
      <tr> 
     <td>2.</td>
     <td class="ars">Station</td>
     <td class="ams">:<a style="padding-left: 8px;"> new york city</a></td> 
     </tr> 

     <tr> 
     <td>3.</td>
     <td class="ars">Date & Time</td>
       <td class="ams">:<a style="padding-left: 8px;">01-01-2018 </a></td> 
    </tr>

     <tr> 
     <td>3.</td>
     <td class="ars">Particulars of  search</td>
     </tr>
     <tr> 
     <td></td>
     <td class="ars">&emsp;a)What are you wearing</td>
     <td>: <a style="padding-left: 8px;">no</a> </td> 
     </tr> 
     <tr> 
     <td>4.</td>
     <td class="ars">The email id you are using and the corresponding address and phone number along with fathers name</td>
     <td>:</td> 
       </tr>
  </table>
</body>
</html>

这是您的问题的解决方案，您无需在特定的div中留出左边距而且您还需要在每行中添加一个数值，这对于所有数值子弹都具有相同的宽度

希望你能理解。

Answer 5

我知道这个问题还有一年多了，但是我想采取另一种方法。

据我所知，您所拥有的是一个有序列表，因此也许带有<ol>属性的start才能完成工作。

.ars{
    width: 350px;
    height:40px;
    font-size: 20px;
    text-align: left;
    padding-left: 100px;
    vertical-align: top;
}
.ams{
    vertical-align: top;
    padding-left: 8px;
}

<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        .ars{
            width: 350px;
            height:40px;
            font-size: 20px;
            text-align: left;
            padding-left: 100px;
            vertical-align: top;
        }
        .ams{
            vertical-align: top;
            padding-left: 8px;
        }
    </style>
<table>
  <tr> 
    <td class="ars">1. District</td> 
    <td class="ams">:<a style="padding-left: 8px;"> ktm qwerty</a></td>
     </tr>
      <tr> 
     <td class="ars">2. Station</td>
     <td class="ams">:<a style="padding-left: 8px;"> new york city</a></td> 
     </tr> 

     <tr> 
     <td class="ars">3. Date & Time </td>
       <td class="ams">:<a style="padding-left: 8px;">01-01-2018 </a></td> 
    </tr>

     <tr> 
     <td class="ars">3. Particulars of  search</td>
     </tr>
     <tr> 
     <td class="ars">&emsp;a)What are you wearing</td>
     <td>: <a style="padding-left: 8px;">no</a> </td> 
     </tr> 
     <tr> 
     <td class="ars">
      <ol start="4">
      <li>The email id you are using and the corresponding address and phone number along with fathers name
      </li>
      </ol></td>
     <td>:</td> 
       </tr>
  </table>
</body>
</html>

如何在表格html中的td内给边距？

5 个答案: