html 一行
在HTML中，要实现一行等宽的布局，可以使用CSS的Flexbox或者Grid布局，这两种布局方式都可以方便地实现等宽的布局，而且兼容性较好，下面分别介绍这两种布局方式的实现方法。
1、使用Flexbox布局
Flexbox布局是一种一维的布局模型，可以轻松地实现一行等宽的布局，需要将容器元素的display属性设置为flex，然后设置容器元素的justifycontent属性为spacebetween，这样容器内的元素就会自动等宽排列。
以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Flexbox布局示例</title>
<style>
.container {
display: flex;
justifycontent: spacebetween;
width: 100%;
backgroundcolor: lightblue;
}
.item {
width: 100px;
height: 100px;
backgroundcolor: lightgreen;
marginright: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
在这个示例中，我们创建了一个名为container的容器元素，将其display属性设置为flex，然后设置了justifycontent属性为spacebetween，接着，我们创建了三个名为item的元素，它们会自动等宽排列，我们设置了container和item的宽度、高度以及背景颜色，以便更清楚地看到布局效果。
2、使用Grid布局
Grid布局是一种二维的布局模型，也可以实现一行等宽的布局，需要将容器元素的display属性设置为grid，然后设置容器元素的gridtemplatecolumns属性为auto auto auto（根据需要调整），这样容器内的元素就会自动等宽排列。
以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Grid布局示例</title>
<style>
.container {
display: grid;
gridtemplatecolumns: auto auto auto;
width: 100%;
backgroundcolor: lightblue;
}
.item {
width: 100px;
height: 100px;
backgroundcolor: lightgreen;
marginright: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
在这个示例中，我们创建了一个名为container的容器元素，将其display属性设置为grid，然后设置了gridtemplatecolumns属性为auto auto auto，接着，我们创建了三个名为item的元素，它们会自动等宽排列，我们设置了container和item的宽度、高度以及背景颜色，以便更清楚地看到布局效果。
在HTML中，使用Flexbox或Grid布局都可以实现一行等宽的布局，Flexbox布局是一维的布局模型，适用于简单的一行等宽布局；而Grid布局是二维的布局模型，适用于复杂的多行多列等宽布局，在实际开发中，可以根据需求选择合适的布局方式。
