ajax发布后CSS发生变化

Question

我有一个列表页面，每一行都是这样的。

<div class="column RightButtons">
<input type="button" class="btn Buttons" onclick="SetStudentPassword(2065)" value="Şifre Değiştir">
<input type="button" class="btn Buttons" onclick="OpenClassChangeDialog(2065)" value="Sınıf Değiştir">
<input type="button" class="btn Buttons" onclick="window.location.href = '/Parent/List?StudentId=2065'" value="Veliler">
<input type="button" class="btn Buttons" value="Düzenle" onclick="window.location.href = '/Student/Update?StudentId=2065'">
</div>

使用 ajax post 我过滤行并获取新行。我在 javascript 中创建了一个变量，其中包含这样的 html 字符串。

<div class="column RightButtons">
<input type="button" class="btn Buttons" onclick="SetStudentPassword(2065)" value="Şifre Değiştir">
<input type="button" class="btn Buttons" onclick="OpenClassChangeDialog(2065)" value="Sınıf Değiştir">
<input type="button" class="btn Buttons" onclick="window.location.href = '/Parent/List?StudentId=2065'" value="Veliler">
<input type="button" class="btn Buttons" value="Düzenle" onclick="window.location.href = '/Student/Update?StudentId=2065'">
</div>

所有属性都相同。所有的CSS都是一样的。但是第二个 html 按钮比前一个更近。请帮忙

Answer 1

您可能正在与行内 block 和空格作斗争。

你可以试试several things但我推荐的方法是，如果您的按钮必须保留内联 block ，则将字体大小调整为零。

.RightButtons {
    font-size: 0;
}
.RightButtons .btn {
    font-size: 14px;
}

或者，如果您的按钮要保持在同一行上，您可以尝试将它们向左浮动。

.RightButtons .btn {
    float: left;
    margin-right: 15px;
}
.RightButtons:after {
    content: ""
    display: table
    clear: both
}