Question

我正在尝试在所有强制输入旁边自动放置一个星号。因为我正在使用MVC和Bootstrap，所以我使用的是this Javascript approach to add mark-up和this CSS approach to add a FontAwesome asterisk。

问题是生成的行间距出错：

screenshot

似乎星号最初放在输入后的行上，因为输入是100％宽度。然后，当CSS移动星号时，容器高度不会改变。

此简化示例说明了问题：http://jsfiddle.net/s3zrpo84/2/

这是我的实际Javascript

function markRequired() {
    var parentForm;

    // look at every mandatory field
    $('input[data-val-required]').each(function () {

        // not all should be treated
        if ($(this).is("input:text") && !$(this).parent().hasClass("input-append") && !(this).hasAttribute("readonly")) {

            // wrap the element with a span whose purpose is to attract the CSS requiredaddon treatment
            $(this).wrap("<span class='requiredaddon'>");

            // locate the form containing the input (we will add a footnote later)
            var parentFinder = $(this)[0];
            while (parentForm == null && parentFinder != null) {
                if (parentFinder.tagName.toLowerCase() == "form") {
                    parentForm = parentFinder;
                }
                parentFinder = parentFinder.parentNode;
            }
        }
    });

    // add footnote to the form
    if (parentForm != null) {
        var rubric = $('<span>', { text: "denotes a mandatory field" })
        .addClass("requiredaddon");
        rubric.appendTo($(parentForm).parent());
    }
}

...和CSS（包含cruft，因为我还在努力解决问题）

.requiredaddon {
    position: relative;
}
.requiredaddon:after {
    position: relative;
    font-family: FontAwesome;
    font-size: 0.7em;
    color: #cd402e;
    top: -25px;
    left:-12px;
    content: "\f069";
    clear: right;
    margin: 0;
    padding: 0;
    display: inline-block;
}

...和.cshtml

<tr>
    <td>Sale Date</td>
    <td>
        <span class="requiredaddon">
            @Html.DropDownListFor(m => Model.Date, Model.GetSalesDateList(Model.Date), new {@class = "form-control"})
        </span>
    </td>
</tr>
<tr>
    <td>@Html.DisplayNameFor(item => Model.PriceString)</td>
    <td>@Html.TextBoxFor(item => Model.PriceString, new { @class = "form-control currency-0-decimals", placeholder = "Sale price" })</td>
</tr>
<tr>
    <td>@Html.DisplayNameFor(item => Model.Comment)</td>
    <td>@Html.TextBoxFor(item => Model.Comment, new { @class = "form-control", placeholder = "Comments" })</td>
</tr>

为noob代码道歉。

修改

按照@Lars的建议，我对此进行了排序。使用position: absolute，不同的浏览器为星号提供了不同的垂直位置，直到我将CSS更改为：

.requiredaddon {
    position: relative;
    vertical-align: bottom; /* added */
    display: inline-block; /* added */
    width: inherit; /* added */
}
.requiredaddon:after {
    position: absolute; /* as per Lars' solution */
    font-family: FontAwesome;
    font-size: 0.7em;
    color: #cd402e;
    top: 1.0em;
    left:-1.2em;
    content: "\f069";
}

Answer 1

使用position: absolute代替position: relative。

position: relative将在不实际移动dom框的情况下移动元素，因此所有其他元素的行为（和定位）就好像它没有被移动一样。

您可以使用position: absolute代替，它会从盒子流中完全删除元素，因此其他元素的行为就像它不存在一样。但绝对定位有点不同。它相对于静态定位的第一个父元素（即具有position: relative的父元素）。

CSS重新定位的内容留下了足迹

1 个答案: