Необъяснимое заполнение в неупорядоченном списке в таблице

-1

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

<html> 
 
    <body> 
 
<style type="text/css"> 
 

 
\t \t html, * { 
 
\t \t \t font-family: Hermit, monospace; 
 
\t \t \t color: #eceff1;font-size: 12px; 
 
\t \t \t height: 100%; 
 
\t \t } 
 

 
\t \t body { 
 
\t \t \t font-size: 12px; 
 

 
\t \t \t background: #222c32; 
 
\t \t \t color: #222c32; 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t ul { 
 
\t \t \t list-style-type: none; 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t li { 
 
\t \t \t margin-left: 15px; 
 
\t \t } 
 

 
\t \t h1 { 
 
\t \t \t font-size: 16px; 
 
\t \t \t color: #222c32; 
 
\t \t \t text-align: center; 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t p { 
 
\t \t \t color: #222c32; 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t a { 
 
\t \t \t color: #222c32; 
 
\t \t \t text-decoration: none; 
 
\t \t } 
 

 
\t \t .theme { 
 
\t \t \t outline: 3px solid black; 
 
\t \t \t background: white; 
 
\t \t \t color: black; 
 
\t \t } 
 

 
\t \t .container { 
 
\t \t display: table; 
 
\t \t position: absolute; 
 
\t \t height: 100%; 
 
\t \t width: 100%; 
 
\t \t } 
 

 
\t \t .cent { 
 
\t \t \t display: table-cell; 
 
\t \t \t vertical-align: middle; 
 
\t \t } 
 

 
\t \t .content { 
 
\t \t \t margin-left: auto; 
 
\t \t \t margin-right: auto; 
 
\t \t \t width: 800px; 
 
\t \t \t height: 500px; 
 
\t \t } 
 

 
\t \t .links { 
 
\t \t \t margin: 10px 5px 5px 10px; 
 
\t \t \t width: 555px; 
 
\t \t \t height: 445px; 
 
\t \t \t float: left; 
 
\t \t \t position: relative; 
 
\t \t } 
 

 
\t \t .picture1 { 
 
\t \t \t color: black; 
 
\t \t \t margin: 10px 10px 5px 5px; 
 
\t \t \t width: 215px; 
 
\t \t \t height: 215px; 
 
\t \t \t float: right; 
 
\t \t \t position: relative; 
 
\t \t \t background: url("dmc.jpg") 
 
\t \t } 
 

 
\t \t .picture2 { 
 
\t \t \t margin: 10px 10px 5px 5px; 
 
\t \t \t width: 215px; 
 
\t \t \t height: 215px; 
 
\t \t \t float: right; 
 
\t \t \t position: relative; 
 
\t \t \t background: url("kaneda.jpg") 
 
\t \t } 
 

 
\t \t .gsearch { 
 
\t \t \t margin: 5px 5px 10px 10px; 
 
\t \t \t width: 555px; 
 
\t \t \t height: 25px; 
 
\t \t \t float: left; 
 
\t \t \t position: relative; 
 
\t \t } 
 

 
\t \t .ysearch { 
 
\t \t \t margin: 5px 10px 10px 5px; 
 
\t \t \t width: 215px; 
 
\t \t \t height: 25px; 
 
\t \t \t float: right; 
 
\t \t \t position: relative; 
 
\t \t } 
 

 
\t \t .header { 
 
\t \t \t margin-top: 150px; 
 
\t \t \t height: auto; 
 
\t \t \t text-align: center; 
 
\t \t } 
 

 
\t \t .linktext { 
 
\t \t \t margin-left: 10px; 
 
\t \t \t text-align: center; 
 
\t \t } 
 

 
\t </style> 
 

 
    </head> 
 
    <body> 
 
    \t <div class="container"> 
 
    \t \t <div class="cent"> 
 
    \t \t \t <div class="content"> 
 
    \t \t \t \t <div class="links theme"> 
 
    \t \t \t \t \t <div class="header"> 
 
    \t \t \t \t \t \t <h1>kakarotten</h1> 
 
    \t \t \t \t \t \t <table> 
 
    \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t <th> 
 
    \t \t \t \t \t \t \t \t \t <ul> 
 
    \t \t \t \t \t \t \t \t \t \t <li><a href="http://boards.4chan.org/a/">/a/</a></li> 
 
    \t \t \t \t \t \t \t \t \t \t <li><a href="http://boards.4chan.org/asp/">/asp/</a></li> 
 
    \t \t \t \t \t \t \t \t \t \t <li><a href="http://boards.4chan.org/mu/">/mu/</a></li> 
 
    \t \t \t \t \t \t \t \t \t \t <li><a href="http://boards.4chan.org/tg/">/tg/</a></li> 
 
    \t \t \t \t \t \t \t \t \t \t <li><a href="http://boards.4chan.org/w/">/w/</a></li> 
 
    \t \t \t \t \t \t \t \t \t </ul> 
 
    \t \t \t \t \t \t \t \t </th> 
 
    \t \t \t \t \t \t \t \t <th> 
 
    \t \t \t \t \t \t \t \t \t <ul> 
 
    \t \t \t \t \t \t \t \t \t \t <li><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></li> 
 
    \t \t \t \t \t \t \t \t \t \t <li><a href="https://reddit.com/r/unixporn/">unxprn</a></li> 
 
    \t \t \t \t \t \t \t \t \t \t <li><a href="https://reddit.com/r/vinyl">vinyl</a></li> 
 
    \t \t \t \t \t \t \t \t \t </ul> 
 
    \t \t \t \t \t \t \t \t </th> 
 
    \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t \t <div class="picture1 theme"></div> 
 
    \t \t \t \t <div class="picture2 theme"></div> 
 
    \t \t \t \t <div class="gsearch theme"></div> 
 
    \t \t \t \t <div class="ysearch theme"></div> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </body> 
 
    </html>

Второй список по-видимому, интервалы между собой, я просто интересно, почему.

источник

2016-11-17 Louie Henderson

Я на 100% уверен, что это не должно быть в '

' для начала. Рефакторинг вашего кода, мой лучший совет. – junkfoodjunkie

@junkfoodjunkie, как я могу поместить 3 или 4 неупорядоченных списка рядом друг с другом в лучшем виде? Я использовал таблицу для удобства, но я понимаю, что это плохая практика. –

Взгляните на пример, который я дал с помощью flexbox. Это дает простой подход без использования плавающего или встроенного блока. Для получения дополнительной информации о flexbox см .: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – haltersweb

ответ

Я согласен с @junkfoodjunkie. Но из-за этого правила CSS

html, * { 
    font-family: Hermit, monospace; 
    color: #eceff1;font-size: 12px; 
    height: 100%; 
}

Это устанавливает все, чтобы быть на 100% от его высоты.

Кроме того, вы можете использовать display:inline-block; на каждом <ul>, чтобы разместить их рядом друг с другом, а не с помощью table.

источник

2016-11-17 22:55:30

, избавившись от правила 'height', зафиксировал это! Большое спасибо, теперь я знаю в следующий раз. –

@LouieHenderson Интересно, что это, похоже, не повлияло на ваш другой список, хотя .... –

Я бы использовал flexbox для размещения неупорядоченных списков рядом друг с другом.

html, * { 
 
     font-family: Hermit, monospace; 
 
     color: #eceff1;font-size: 12px; 
 
     height: 100%; 
 
    } 
 

 
    body { 
 
     font-size: 12px; 
 

 
     background: #222c32; 
 
     color: #222c32; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    li { 
 
     margin-left: 15px; 
 
    } 
 

 
    h1 { 
 
     font-size: 16px; 
 
     color: #222c32; 
 
     text-align: center; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    p { 
 
     color: #222c32; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    a { 
 
     color: #222c32; 
 
     text-decoration: none; 
 
    } 
 

 
    .theme { 
 
     outline: 3px solid black; 
 
     background: white; 
 
     color: black; 
 
    } 
 

 
    .container { 
 
     display: table; 
 
     position: absolute; 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 

 
    .cent { 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
    } 
 

 
    .content { 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     width: 800px; 
 
     height: 500px; 
 
    } 
 

 
    .links { 
 
     margin: 10px 5px 5px 10px; 
 
     width: 555px; 
 
     height: 445px; 
 
     float: left; 
 
     position: relative; 
 
    } 
 

 
    .picture1 { 
 
     color: black; 
 
     margin: 10px 10px 5px 5px; 
 
     width: 215px; 
 
     height: 215px; 
 
     float: right; 
 
     position: relative; 
 
     background: url("dmc.jpg") 
 
    } 
 

 
    .picture2 { 
 
     margin: 10px 10px 5px 5px; 
 
     width: 215px; 
 
     height: 215px; 
 
     float: right; 
 
     position: relative; 
 
     background: url("kaneda.jpg") 
 
    } 
 

 
    .gsearch { 
 
     margin: 5px 5px 10px 10px; 
 
     width: 555px; 
 
     height: 25px; 
 
     float: left; 
 
     position: relative; 
 
    } 
 

 
    .ysearch { 
 
     margin: 5px 10px 10px 5px; 
 
     width: 215px; 
 
     height: 25px; 
 
     float: right; 
 
     position: relative; 
 
    } 
 

 
    .header { 
 
     margin-top: 150px; 
 
     height: auto; 
 
     text-align: center; 
 
    } 
 

 
    .linktext { 
 
     margin-left: 10px; 
 
     text-align: center; 
 
    } 
 
.list-group { 
 
    text-align: left; 
 
    display: flex; 
 
} 
 
.list-group ul { 
 
    width: 25%; 
 
}

<div class="container"> 
 
     <div class="cent"> 
 
      <div class="content"> 
 
       <div class="links theme"> 
 
        <div class="header"> 
 
         <h1>kakarotten</h1> 
 
         <div class="list-group"> 
 
         <ul> 
 
          <li><a href="http://boards.4chan.org/a/">/a/</a></li> 
 
          <li><a href="http://boards.4chan.org/asp/">/asp/</a></li> 
 
          <li><a href="http://boards.4chan.org/mu/">/mu/</a></li> 
 
          <li><a href="http://boards.4chan.org/tg/">/tg/</a></li> 
 
          <li><a href="http://boards.4chan.org/w/">/w/</a></li> 
 
         </ul> 
 
         <ul> 
 
          <li><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></li> 
 
          <li><a href="https://reddit.com/r/unixporn/">unxprn</a></li> 
 
          <li><a href="https://reddit.com/r/vinyl">vinyl</a></li> 
 
         </ul> 
 
         <ul> 
 
          <li><a href="http://boards.4chan.org/a/">/a/</a></li> 
 
          <li><a href="http://boards.4chan.org/asp/">/asp/</a></li> 
 
          <li><a href="http://boards.4chan.org/mu/">/mu/</a></li> 
 
          <li><a href="http://boards.4chan.org/tg/">/tg/</a></li> 
 
          <li><a href="http://boards.4chan.org/w/">/w/</a></li> 
 
         </ul> 
 
         <ul> 
 
          <li><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></li> 
 
          <li><a href="https://reddit.com/r/unixporn/">unxprn</a></li> 
 
          <li><a href="https://reddit.com/r/vinyl">vinyl</a></li> 
 
         </ul> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="picture1 theme"></div> 
 
       <div class="picture2 theme"></div> 
 
       <div class="gsearch theme"></div> 
 
       <div class="ysearch theme"></div> 
 
      </div> 
 
     </div> 
 
    </div>

источник

2016-11-17 22:53:20 haltersweb

Неправильная структура таблицы. Вы должны использовать th в качестве заголовка таблицы, а затем tr как строку таблицы.

Пример ниже:

<body> 
 
    <div class="container"> 
 
     <div class="cent"> 
 
      <div class="content"> 
 
       <div class="links theme"> 
 
        <div class="header"> 
 
         <h1>kakarotten</h1> 
 
         <table> 
 
          <tr> 
 
           <th> 
 
            <a href="http://boards.4chan.org/a/">/a/</a> </th> 
 
            <th> 
 
            <a href="http://boards.4chan.org/a/">/a/</a> </th> 
 
            <th> 
 
            <a href="http://boards.4chan.org/a/">/a/</a> </th> 
 
            <th> 
 
            <a href="http://boards.4chan.org/a/">/a/</a> </th> 
 
            <th> 
 
            <a href="http://boards.4chan.org/a/">/a/</a> </th> 
 
             </tr> 
 
           
 
           <tr> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           
 
           
 
           </tr> 
 
           
 
           <tr> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           <td><a href="https://reddit.com/r/squaredcircle/">sqrdcrcl</a></td> 
 
           
 
           
 
           </tr> 
 
             
 
          
 
         </table> 
 
        </div> 
 
       </div> 
 
       <div class="picture1 theme"></div> 
 
       <div class="picture2 theme"></div> 
 
       <div class="gsearch theme"></div> 
 
       <div class="ysearch theme"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

Я надеюсь, что это то, что вы ищете. Удачи

источник

2016-11-17 22:57:43 Kamil

Табличные заголовки должны быть обернуты в ряд. –

И оба '

' и' '... – junkfoodjunkie

Смежные вопросы

' 'и'	'' должны соответственно быть обернуты в '