时间戳

首页 > 解决方案 > 左右对齐文本

html - 左右对齐文本

问题描述

我正在从 json DB 读取数据并将其显示在 div 中。唯一的问题是我正在为布局而苦苦挣扎，我有以下标题。

我希望它看起来像下面这样。（这些点只是为了对齐所有内容，空格键不会影响作品的位置）

网站离线.................................................. ............................. 离线时间

测试站点 1................................................. ..................................................... . 。3小时

请看看我在下面做了什么。

function CheckSitesDownTime(){
        $.ajax({
            url: 'OfflineSites.json',
            dataType: 'json',
           type: 'get',
            cache: false,
            success: function(data) {
                $(data.SitesOffline1).each(function(index, value) {
                    console.log(value.time);
                        var para = document.createElement("h6");
var time = document.createTextNode(value.time);
para.appendChild(time);
para.className = "text-right";
console.log(para);
console.log("end");
document.getElementById("monitor-panel").appendChild(para);
                  });

            }
       });}

function CheckSites(){
        $.ajax({
            url: 'OfflineSites.json',
            dataType: 'json',
           type: 'get',
            cache: false,
            success: function(data) {
                $(data.SitesOffline).each(function(index, value) {
                    console.log(value.name);
                        var para = document.createElement("h6");
var t = document.createTextNode(value.name);
para.appendChild(t);
para.
console.log(para);
console.log("end");
document.getElementById("monitor-panel").appendChild(para);
                  });
            }
       });}

上面的代码导致以下布局

网站离线.................................................. ................................................离线时间

测试站点 1................................................. ..................................................... …………………………………………………………………………………… ..................................................... ...................... ....................3小时

我想我需要同时将它们附加在一起，所以像这样

para.className = "style="text-align:left";
para.appendChild(Name);
para.appendChild ("<span")
para.className = "style="float:right;";
para.appendChild (Time)
para.appendChild ("</span>")

为质量差的代码道歉，两天前开始用 HTML、CSS 编码，所以还在学习。

标签： htmlcss

解决方案

现在在 css 中有一个非常有用的东西叫做 Flex box。您可以在此处阅读更多详细信息。https://css-tricks.com/snippets/css/a-guide-to-flexbox/

你得到了浮动的上述结果原因。

以此为例。

.container{
display:flex;
justify-content: space-between;
}
<div class="container">
<span>Element 1</span>
<span>Element 2</span>
</div>

推荐阅读