javascript - CSS 右对齐被推到新行

Question

我有一个根据鼠标悬停显示不同值的文本框，我希望名称左对齐，相应的值右对齐。我已关闭代码，但工具提示将右对齐文本推到新行。这是 CSS 和 JS 字符串变量，这里有什么问题吗？

.toolTip {
    font-family: arial;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    height: 130px;
    width: 390px;
    border: 1px solid #6F257F;
    text-align: left;
    display: none;
}  

.toolTip p.left {
    text-align: left;
    font-weight: bold;
}

.toolTip p.right {
    text-align: right;
}

var string = "<p class = 'left'>90-Day Actual Margin:  </p>" + "<p class = 'right'>12345</p>"

这是它目前的样子的截图。

Answer 1

这里有一个方法，使用flexbox

.toolTip {
    font-family: arial;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    height: 130px;
    width: 390px;
    border: 1px solid #6F257F;
    text-align: left;
    display: none;
}  

.toolTip div {
    display: flex;
}

.toolTip div p.left {
    flex: 1;
    font-weight: bold;
}

var string = "<div><p class = 'left'>90-Day Actual Margin:  </p>" + "<p class = 'right'>12345</p></div>"

.toolTip {
        font-family: arial;
        position: absolute;
        padding-left: 10px;
        padding-right: 10px;
        height: 130px;
        width: 390px;
        border: 1px solid #6F257F;
        text-align: left;
        /*display: none;*/
    }  
    
    .toolTip div {
        display: flex;
    }
    
    .toolTip div p.left {
        flex: 1;
        font-weight: bold;
    }

<div class="toolTip">
  <div>
    <p class = 'left'>90-Day Actual Margin:  </p>
    <p class = 'right'>12345</p>
  </div>
</div>

---

这是另一个，使用float

.toolTip {
    font-family: arial;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    height: 130px;
    width: 390px;
    border: 1px solid #6F257F;
    text-align: left;
    display: none;
}  

.toolTip p.left {
    float: left;
    font-weight: bold;
}

.toolTip p.right {
    float: right;
}

.toolTip::after {     /* clearfix, to clear the floats */
    content: '';
    display: block;
    clear: both;
}

var string = "<p class = 'left'>90-Day Actual Margin:  </p>" + "<p class = 'right'>12345</p>"

.toolTip {
        font-family: arial;
        position: absolute;
        padding-left: 10px;
        padding-right: 10px;
        height: 130px;
        width: 390px;
        border: 1px solid #6F257F;
        text-align: left;
        /*display: none;*/
    }  
    
    .toolTip p.left {
        float: left;
        font-weight: bold;
    }
    
    .toolTip p.right {
        float: right;
    }

    .toolTip::after {     /* clearfix, to clear the floats */
        content: '';
        display: block;
        clear: both;
    }

<div class="toolTip">
  <p class = 'left'>90-Day Actual Margin:  </p>
  <p class = 'right'>12345</p>
</div>