ASP. NET MVC HTML выравнивание и ширина элемента - PullRequest
Новая
       7

ASP. NET MVC HTML выравнивание и ширина элемента

0 голосов
/ 19 июня 2020

У меня вопрос о выравнивании элементов HTML на моей странице ASP. NET Core MVC .cs html. Я пытаюсь выровнять два списка и их заголовки / метки рядом.

Это мой файл .cs html: 

<div style="width:100%;">
    <form method="post">
        <div id="div_top_hypers">
            <ul id="ul_top_hypers">
                <li>
                    <label align="left">List of Users</label>
                    </br>
                    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
                    {
                        @Html.ListBox("usersList")
                    }
                </li>
                <li>
                    <label align="left">List of Users2</label>
                    </br>
                    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
                    {

                        @Html.ListBox("usersList2")
                    }
                </li>
            </ul>
        <input type="submit" value="Generate reports" asp-controller="Home" asp-action="ScoreData"/>
        </div>
    </form>
</div>

А в моем разделе CSS есть следующее содержимое: 

#div_top_hypers {
    background-color: #eeeeee;
    display: inline;
}

#ul_top_hypers li {
    display: inline;
}

Мне нужны два списка рядом ... но я получаю их одно под другим. Как я могу это исправить?

Кроме того, я пытаюсь расширить свои списки. Я использовал класс div с шириной, скажем, 200 пикселей, но это никак не отражается на пользовательском интерфейсе. Он всегда узкий.

На данный момент ширина списка - это ширина самого большого элемента внутри него (я не устанавливал его в автоматическом режиме, но если я установил для него некоторую ширину, это не повлияет на ).

Введите описание изображения здесь

1 Ответ

0 голосов
/ 19 июня 2020

Вам нужно изменить несколько строк кода, как показано ниже: 

<div style="width:100%;">
    <form method="post">
        <div id="div_top_hypers">
            <ul id="ul_top_hypers">
                <li>
                    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
                    {
                        @Html.Label("List of Users1")
                        @Html.ListBox("usersList1", usersList)
                        @Html.Label("List of Users2")
                        @Html.ListBox("usersList2", usersList2)
                    }
                </li>
            </ul>
            <input type="submit" value="Generate reports" asp-controller="Home" asp-action="ScoreData" />
        </div>
    </form>
</div>

Используйте строки кода выше или строки ниже. Оба должны работать нормально. 

<div style="width:100%;">
    <form method="post">
        <div id="div_top_hypers">
            <ul id="ul_top_hypers">
                <li>
                    @Html.Label("List of Users1")
                    @Html.ListBox("usersList1", usersList)
                    @Html.Label("List of Users2")
                    @Html.ListBox("usersList2", usersList2)
                </li>
            </ul>
            <input type="submit" value="Generate reports" asp-controller="Home" asp-action="ScoreData" />
        </div>
    </form>
</div>

И сохраните высоту списка до 20 пикселей. Тогда ваш результат будет выглядеть, как показано ниже.

Введите описание изображения здесь

...