Html CSS修改以排列指针

Html CSS修改以排列指针,html,css,styles,position,Html,Css,Styles,Position,我的html上有一个css工具提示。我在气泡底部得到箭头标记(气泡:after)。我如何重新安排到我的泡泡的右中心 这是我的div <div class="bubble">Hi there. I like turtles.</div> <p style="margin-left: 1em;">Mikey sez</p> 你好。我喜欢海龟。 米奇经济特区 我的div上显示的气泡来自下面的css <style type="text/css

我的html上有一个css工具提示。我在气泡底部得到箭头标记
(气泡:after)
。我如何重新安排到我的泡泡的右中心

这是我的
div

 <div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>
你好。我喜欢海龟。 米奇经济特区

我的div上显示的气泡来自下面的css

 <style type="text/css">
 .bubble {
 position: relative;
 background-color:#eee;
 margin: 0;
 padding:10px;
 text-align:center;
 width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
}
.bubble:after {    //This after mark has to be arranged so to point to the right of bubble
position: absolute;  //The position should be at the center
display: block;
content: "";  
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
 }

.泡泡{
位置:相对位置;
背景色:#eee;
保证金:0;
填充:10px;
文本对齐:居中;
宽度:180px;
-moz边界半径:10px;
-webkit边界半径:10px;
-网络工具包盒阴影:0px 0 3px rgba(0,0,0,0.25);
-moz盒阴影:0px 0 3px rgba(0,0,0,0.25);
盒影:0px 0 3px rgba(0,0,0,0.25);
}
.bubble:after{//必须将此after标记排列为指向bubble的右侧
位置:绝对;//位置应在中心
显示:块;
内容:“;
边框颜色:#eee透明;
边框样式:实心;
边框宽度:10px;
身高:0;
宽度:0;
位置:绝对位置;
底部:-19px;
左:1米;
}

如下图所示重新排列

这样就可以了

这样就行了

退房。您只需更改
::元素之后的绝对位置,并从以下位置切换哪个边框有颜色:

border-color: blue transparent transparent transparent;
bottom:-19px;
left:1em;
为此:

border-color: transparent transparent transparent blue;
bottom:25%;
right:-19px;
退房。您只需更改
::元素之后的绝对位置,并从以下位置切换哪个边框有颜色:

border-color: blue transparent transparent transparent;
bottom:-19px;
left:1em;
为此:

border-color: transparent transparent transparent blue;
bottom:25%;
right:-19px;

那可不行。将锚定位在正中心。我需要它在bubble和v-align中心的右侧。@其中一个选项,而不是在代码中复制和粘贴,您应该自己添加它并尝试理解它。它不起作用的原因是没有为CSS转义注释。这正是它所做的。把它贴在这里就行了。我修复了JS fomart中的注释,这可能就是问题所在。正如我的头痛所说的,最好是你自己写。这样你会学到更多东西,但这并不能完全奏效。将锚定位在正中心。我需要它在bubble和v-align中心的右侧。@其中一个选项,而不是在代码中复制和粘贴,您应该自己添加它并尝试理解它。它不起作用的原因是没有为CSS转义注释。这正是它所做的。把它贴在这里就行了。我修复了JS fomart中的注释,这可能就是问题所在。正如我的头痛所说的,最好是你自己写。通过这种方式,您将了解更多信息。此解决方案可能适用于该特定情况,但如果您决定增加
气泡
大小或填充,则布局将中断。此解决方案可能适用于该特定情况,但如果您决定增加
气泡
大小或填充,则布局将中断。