提问人：timbox90 提问时间：9/15/2023 最后编辑：j08691timbox90 更新时间：9/15/2023 访问量：44
HTML - 页面左侧和右侧的同一行上的列表项
HTML - list items on left and right of page, on same lines
问：
我正在创建一个网站，这将是我的简历。我的名字居中，我将在下面提供我的联系方式。在左边，我的地址将超过两行，在右边，我将通过两行来显示我的电子邮件和电话。我正在为此使用 UL 标签。
这是我的代码：
<div class="container">
<div class="fullName">
<h1 class="title">My Name</h1>
</div>
<div>
<ul style="float:left;">
<ul>Address Line 1</ul>
<ul>Address Line 2</ul>
</ul>
</div>
<div>
<ul style="float:right;">
<ul>T: number here</ul>
<ul>E: [email protected]</ul>
</ul>
</div>正如你所看到的，我使用了 ul，我做了一个快速的谷歌，并认为使用左右浮点会起作用。右边有效，但左边不行;它从页面的左侧缩进，而右侧一直缩进到右侧，下面是一个屏幕截图：
正如你所知道的，我是一个新手，完全没有HTML等背景。
答：
0赞
Afro Habesha
9/15/2023
#1
实现所需布局的最简单方法是将两个元素包装在 a 中，并将 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>
评论
0赞
timbox90
9/15/2023
谢谢你 - 我将研究弹性框，我仍处于 HTML / CSS 的非常非常早期的阶段。感谢您抽出宝贵时间提供答案！
0赞
Will Smithee
9/15/2023
#2
一种选择是使用表：
<!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: [email protected]
</td>
</tr>
</table>
</body>
</html>
评论
0赞
j08691
9/15/2023
表用于表格数据，而不是布局。这就是 CSS 的用途。
0赞
Johannes
9/15/2023
#3
使用不带标签的 s 在语义上确实是错误的，也是无效的 HTML（参见 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul）。您应该使用不同的结构，对最外层 s 内的条目使用标记。ulliliul
不过，要回答这个问题：只需通过添加ulul { padding: 0; }
ul {
padding: 0;
}<div class="container">
<div class="fullName">
<h1 class="title">My Name</h1>
</div>
<div>
<ul style="float:left;">
<ul>Address Line 1</ul>
<ul>Address Line 2</ul>
</ul>
</div>
<div>
<ul style="float:right;">
<ul>T: number here</ul>
<ul>E: [email protected]</ul>
</ul>
</div>评论
0赞
timbox90
9/15/2023
非常感谢你！:)我不知道默认填充。这种改变，效果很好！感谢您对标签的反馈，我现在将阅读链接并实施更改。我现在想养成良好的习惯，因为我开始了我的 HTML 之旅。再次感谢！
上一个：什么是清除？
评论