HTML — список элементов слева и справа страницы в одних и тех же строках.

Я создаю сайт, который будет моим резюме. В центре моего имени, ниже будут мои контактные данные. Слева мой адрес будет располагаться в двух строках, а справа — в двух строках адрес электронной почты и телефон. Для этого я использую тег UL.

Это мой код:

Как вы можете видеть, я использовал ul, быстро погуглил и подумал, что использование float влево и вправо будет работать. Правая работает, а левая нет; он имеет отступ от левой части страницы, тогда как правая часть находится полностью вправо, вот снимок экрана:

Скриншот

Как вы можете сказать, я новичок и вообще не имею никакого опыта в HTML и т. д.

Источник

3 ответа

Одним из вариантов может быть использование таблицы:

      <!DOCTYPE html>
<html>
    <head>
        <title>
            My Resume
        </title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
        </link>
        <style>
            table,td,th{
                    border:0px solid #000
                }
            table{
                width:100%;
                border-collapse:collapse
            }
            td,th{
                width:50%;
                padding-top:0px;
                padding-bottom:0px
            }
            td.center-spanned{
                text-align:center;
            }
            td.right-aligned{
                text-align:right;
                padding-left:0px;
                padding-right:50px
            }
            td.left-aligned{
                text-align:left;
                padding-left:50px;
                padding-right:0px
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th class="center-spanned" colspan="2">
                    <div class="fullName">
                        <h1 class="title">
                            My Name
                        </h1>
                    </div>
                </th>
            </tr>
            <tr>
                <td class="right-aligned">
                    Address Line 1
                </td>
                <td class="left-aligned">
                    T: number here
                </td>
            </tr>
            <tr>
                <td class="right-aligned">
                    Address Line 2
                </td>
                <td class="left-aligned">
                    E: xyz@gmail.com
                </td>
            </tr>
        </table>
    </body>
</html>
Источник

Использование s без тегов внутри них действительно неправильно семантически, а также является недопустимым HTML (см. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul). Вам следует использовать другую структуру, используяliтеги для записей внутри самых внешних s.

Тем не менее, чтобы ответить на вопрос: просто сбросьте отступы по умолчанию дляuls, добавивul { padding: 0; }

Источник

Самый простой способ добиться желаемого макета — обернуть оба элемента в и применить flexbox к файлу . Вы можете установить для свойства justify-content значение «space-between», чтобы создать пространство между двумя элементами. Вот код:

         <div class="container">
        <ul>
            <!-- List 1 content here -->
        </ul>
        <ul>
            <!-- List 2 content here -->
        </ul>
    </div>

     <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
    </style>
Источник
Другие вопросы по тегам