html - 页面上的间距列表项问题

Question

我需要帮助尝试在页面上放置一个无序列表的元素，这里是它目前的样子:

我希望带有消息“拖动页面...”的边框位于右侧

像这样:

这是 HTML:( Razor )

<div class="admin registrationFields white-strip padded">
    <div class="well container">
        <fieldset>
            <legend><span class="glyphicon glyphicon-file"></span>@ViewBag.Title</legend>

            <br/>
            <div class="form-group">
                @Html.LabelFor(model => model.SelectedSiteId, new {@class = "col-md-2"})
                <div class="col-md-6">
                    @Html.DropDownListFor(model => model.SelectedSiteId, new SelectList(Model.AllSites, "SiteId", "SiteName", Model.SelectedSiteId), new {@class = "form-control"})

                </div>

            </div>



            <ul class="list-group page-reordering">
                @foreach (var page in Model.Pages.Where(p => p.ParentMenuID == null))
                {
                    <li class="list-group-item margin-space-reorder" data-menuid="@page.MenuID">
                        <h4>@page.PageName</h4>
                        <ul class="list-group">

                            @foreach (var child in Model.Pages.Where(p => p.ParentMenuID == page.MenuID).OrderBy(o => o.MenuOrder))
                            {

                                <li class="list-group-item active" data-menuid="@child.MenuID">
                                    <h4>@child.PageName</h4>
                                </li>

                            }
                        </ul>
                    </li>
                }
            </ul>
            <input id="page-order" name="page-order" type="hidden" value="">
            <input type="button" value="Save" class="btn btn-primary" id="SaveOrderPage">
        </fieldset>
    </div>
</div>
}

这是CSS:

.page-reordering .list-group-item {
    background-color: #3071a9;  
}

.margin-space-reorder {
    margin: 15px 0;
}
.page-reordering .list-group {
   min-height: 60px;
   border: 1px #fff solid;
   border-radius: 5px;
}

.page-reordering .list-group:before {
    content: 'Drag a page here to create a child page of this parent.';
    color: #AEAEAE;
    font-size: 25px;
    font-style: italic;
    padding-left: 10px;    
}

.page-reordering .list-group-item h4 {
   color: #fff;    
}
.page-reordering .list-group-item li h4 {
   padding-left: 1px;    
}

非常感谢任何帮助。

Answer 1

可能的答案:使 .page-reordering .list-group::before 元素成为 block 元素，这样它就可以从父元素继承宽度，然后将文本右对齐。

.page-reordering .list-group::before {
content: 'Drag a page here to create a child page of this parent.';
color: #AEAEAE;
font-size: 25px;
font-style: italic;
padding-left: 10px;
text-align: right;
width: inherit;
display: block;
}

示例 jsfiddle