Question

我目前正在整理一个小页面，但我在列表中遇到一些无法解释的填充问题。到目前为止，这是完整的代码：

<html>
  <body>
<style type="text/css">

		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;
		}

	</style>

    </head>
    <body>
    	<div class="container">
    		<div class="cent">
    			<div class="content">
    				<div class="links theme">
    					<div class="header">
    						<h1>kakarotten</h1>
    						<table>
    							<tr>
    								<th>
    									<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>
    								</th>
    								<th>
    									<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>
    								</th>
    							</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>
    </html>

第二个列表似乎是将它自己隔开，我只是想知道为什么。

Answer 1

我会使用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>

Answer 2

我同意@junkfoodjunkie。但这是因为这个CSS规则

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

这样可以将所有内容设置为容器高度的100％。

此外，您可以在每个display:inline-block;上使用<ul>将它们放在一起，而不是使用table。

Answer 3

您的表格结构错误。您应该使用th作为表头，然后使用tr作为表行。

以下示例：

＆＃13;

<div class="main-nav">
   <ul class="menu">
      <li>
       <a href="..."> ... </a>

＆＃13;

我希望这就是你要找的东西。祝你好运

表中无序列表中的原因不明的填充

3 个答案: