我有以下一段代码。
<div class="row no-gutters">
<div class="col-6 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;">
placeholder
<i class="fa fa-caret-right fa-xs"></i>
</div>
<div class="col-6 text-uppercase font-weight-lighter">placeholder</div>
</div>关于这段代码，我有两个问题：
-
如何将文本(占位符(与图标对齐？
-
如何在两段文本和图标之间添加间距？
(所有代码都在卡块内(
我使用的是旧版本的HTML(HTML5之前(，不能使用CSS。(这是我第一次真正深入研究HTML，如果我的代码太糟糕，我很抱歉(
提前谢谢！
您在代码中使用bootstrap类，如果在html中插入bootstrap文件，则可以将这些样式与类一起使用。
其中属性为：
m-用于设置边距的类p-用于设置填充的类边是其中之一：
t-用于设置页边空白或填充顶部的类b-用于设置边距底部或填充底部的类l-用于设置左边距或左填充的类r-用于设置右侧边距或右侧填充的类x-用于同时设置*-left和*-right的类y-同时设置*-top和*-bottom的类空白-用于在元素的所有4面上设置边距或填充的类
您可以使用bootstrap进行对齐和间隔。
在这种情况下，我使用的是均匀的间距，但您可以使用自举网格系统来更改字段之间的间距。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap spacing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="row no-gutters">
<div class="col-3 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;">
placeholder
</div>
<div class="col-3 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;"></div>
<div class="col-3">
<i class="fa fa-caret-right fa-xs"></i>
</div>
<div class="col-3 text-uppercase font-weight-lighter">placeholder</div>
</div>
</body>
</html>