Почему не работает padding-bottom для перемещения элемента вверх? - PullRequest
0 голосов
/ 06 декабря 2018

Я пытаюсь переместить оранжевый знак плюс (в нижнем правом углу экрана) вверх, чтобы он был ближе к другим значкам, прямо под ними.Padding-bottom не работает, но padding-top работает.Я полагал, что элемент над ним должен иметь много отступов, которые не позволяют ему двигаться вверх, но инструмент инспектора показывает, что между ними есть пространство.

enter image description here

Мне трудно знать, что здесь происходит, так как мои инструкторы написали этот код, и поэтому я не совсем понимаю, как он сконструирован.Я также довольно новичок в Html / Css, хотя padding-bottom до сих пор меня не подводил.

Вот код частичного представления, составляющий вторую таблицу.Оранжевый значок плюса находится в самом низу, под тегом конца таблицы:

@model IEnumerable<JobPlacementDashboard.Models.JPOutsideNetworking>

}
<table class="table">
    <tr>
        <th class="sort-button-style table-headers fixed">
            <a onclick="sortPartial('@ViewBag.NameSortParm')">Name</a>
        </th>
        <th class="sort-button-style table-headers fixed">
            <a onclick="sortPartial('@ViewBag.PositionSortParm')">Position</a>
        </th>
        <th class="sort-button-style table-headers fixed ">
            <a onclick="sortPartial('@ViewBag.CompanySortParm')">Company</a>
        </th>
        <th class="sort-button-style table-headers fixed">
            <label class="network-label networkingheader">LinkedIn</label>
        </th>
        <th class="sort-button-style table-headers fixed">
            <a onclick="sortPartial('@ViewBag.LocationSortParm')">Location</a>
        </th>
        <th class="sort-button-style table-headers fixed">
            <label class="network-label networkingheader">Email</label>
        </th>
        <th class="sort-button-style table-headers fixed">
            <a onclick="sortPartial('@ViewBag.StackSortParm')">Stack</a>
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="text-center">
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Position)
            </td>
            <td>
                <a href="http://@Html.ExternalLink(item.CompanyURL)" target="_blank">@Html.DisplayFor(modelItem => item.Company)</a>
            </td>
            <td>
                <a href="http://@Html.ExternalLink(item.LinkedIn)" target="_blank">LinkedIn</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Location)
            </td>
            <td>
                <a href="mailto:@Html.ExternalLink(item.Contact)" target="_blank">@Html.DisplayFor(modelItem => item.Contact)</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Stack)
            </td>
            <td class="font20">
                @if (User.IsInRole("Admin"))
                {
                    @Html.ActionLink(HttpUtility.HtmlDecode("&#x270E;"), "Edit", new { id = item.OutsideNetworkingID })
                    <span>|</span>
                    @Html.ActionLink(HttpUtility.HtmlDecode("&#x1F5D1;"), "Delete", new { id = item.OutsideNetworkingID })
                }
            </td>
        </tr>
    }
</table>

@if (User.IsInRole("Admin"))
{

    <div class="createnewplus">
        @Html.ActionLink(HttpUtility.HtmlDecode("&#x2b;"), "Create")
    </div>

}

Вот часть Css, предназначенная для плюса:

.createnewplus  {
font-size:30px;
font-weight:800;
margin-left:1075px;

}

Поле слевапотому что он автоматически отображается в крайнем левом углу, под именем студента, когда он должен находиться под другими значками.

Если у кого-то есть идеи относительно того, почему padding-bottom не работает в этом случае, ябыл бы очень благодарен.Я прошу прощения, если это мучительно тупой вопрос;и если вам нужно больше подробностей, чтобы рассказать, что происходит, пожалуйста, дайте мне знать!

Редактировать: padding-bottom в настоящее время отсутствует в css, потому что я его вынул, поскольку он ничего не делал.

1 Ответ

0 голосов
/ 06 декабря 2018

Padding-bottom создаст пробел (padding) ниже div createnewplus, поэтому перемещает любой контент, который идет после него, дальше вниз по странице.Похоже, что div createnewplus является последним элементом на странице, поэтому, когда вы добавляете padding-bottom, ничего не меняется.

Вам нужно найти css, который отвечает за отступ / отступ после каждогоТаблица.Опуская его, вы поднимаете значок вверх.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...