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>

Answer 2

制作他们的（2 p元素）

display:inline;

它应该解决问题

Answer 3

我知道你想对准你的标题＆＃34; Oklahoma（40109＆＃34;向右，对吗？你必须给标题赋予和id以便你可以用CSS改变它的位置。事实上你有几个选项。

你可以给tittle一个id：

#heading {
        text-align: left;
}

如果你的标题是div的子节点，属性为.toolTip，你可以这样做：

.toolTip > h1 {
    text-align: left;
}

为了获得90天的实际保证金：＆＃39;和＆＃39; 12345＆＃39;在同一行，您必须执行以下操作：

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

或将您的CSS更改为：

.toolTip p.left {
    text-align: left;
    font-weight: bold;
    display: inline-block
    float: left:
    position: relative;
}

.toolTip p.right {
    text-align: right;
    display: inline-block;
    float: left:
    position: relative;
}

Answer 4

尝试为两个属性设置css width:，然后使用display:inline-block;

Answer 5

将p元素的样式更改为：

display:inline-block;

正确的p元素：

float:right;

完整的一行：

var string = "<p class = 'left' style='display:inline-block;'>90-Day Actual Margin:  </p> <p class = 'right' style='display:inline-block;float:right;'>12345</p>"

CSS右对齐被推到新行

5 个答案: