Css 如何使跨距对齐_Css_Alignment

Css 如何使跨距对齐

css

Css 如何使跨距对齐,css,alignment,Css,Alignment,我试图让我的酒吧在一条直线后的文本对齐。它们使用css绘制，并使用jQuery设置动画。当我使用div类“meter orange”并使用跨距样式的宽度设置进度条的大小时，会触发跨距 <div class="meter orange">HTML <span style="width: 65.3%"></span> </div> HTML: <!DOCTYPE html> <html> <head> <me

我试图让我的酒吧在一条直线后的文本对齐。它们使用css绘制，并使用jQuery设置动画。当我使用div类“meter orange”并使用跨距样式的宽度设置进度条的大小时，会触发跨距

<div class="meter orange">HTML
<span style="width: 65.3%"></span>
</div>

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>

    <link rel="stylesheet" type="text/css" href="bars.css">


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
    $(function() {
        $(".meter > span").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 900);
        });
    });
</script>


</head>

<body>

<div id="progress-bars-page-wrap">

    <div class="meter orange">Javascript<span style="width: 33.3%"></span>
    </div>
    <div class="meter orange">HTML
        <span style="width: 65.3%"></span>
    </div>
    <div class="meter orange">CSS
        <span style="width: 70.3%"></span>
    </div>
    <div class="meter orange">Java
        <span style="width: 60%"></span>
    </div>
    <div class="meter orange">Python
        <span style="width: 84%"></span>
    </div>
    <div class="meter orange">.Net
        <span style="width: 32%"></span>
    </div>
    <div class="meter orange">Ajax
        <span style="width: 60%"></span>
    </div>
</div>

</body>

</html>


$（函数（）{
$（“.meter>span”）。每个（函数（）{
$（本）
.data（“origWidth”，$（this）.width（））
.宽度（0）
.制作动画({
宽度：$（this）.data（“origWidth”）
}, 900);
});
});
Javascript
HTML
CSS
JAVA
python
.Net
AJAX

在编程语言周围放置

s，并将其固定宽度设置为相同的像素数。这样，每种编程语言将占用相同的空间，这将导致在每一行的相同点开始的条

CSS:

HTML:

Javascript
HTML
CSS

这通常通过设置左侧元素的宽度来完成。通过设置

display:inline block

，可以设置内联元素（

）的

宽度和高度

CSS
.meter .label {
    display:inline-block;
    width:4em;
}
.meter .bar {
    height: 100%;
    display:inline-block;
    background-color: rgb(43, 194, 83);
}

HTML
<div class="meter orange nostripes">
    <span class="label">Javascript</span>  
    <span class="bar" style="width: 33.3%"></span>
</div>

如果您无法更改HTML，我很确定您可以添加以下内容：
.meter span {
  position: absolute;
  left: 50px; /* adjust to fit label length */
}

你能再详细解释一下吗？有没有办法让文本不出现在动画中？当这些条滑出时，文本会随之滑出视图。我想保持文本静止，只是让条移动。它仍然是动画。它不是在文本中流动并绘制条形图的动画，而是将文本从0%设置为设置的百分比，并对条形图执行相同的操作。我忘了按“保存编辑”，请再次尝试最后一个小提琴。仅供参考：我约74%确定在内联元素上设置宽度无效。如果你想把display:block放在一个span上，你最好把它设为一个div…你的意思是为了验证吗？我不会验证，因为我的模板将有很多HTML5
.meter .label {
    display:inline-block;
    width:4em;
}
.meter .bar {
    height: 100%;
    display:inline-block;
    background-color: rgb(43, 194, 83);
}

<div class="meter orange nostripes">
    <span class="label">Javascript</span>  
    <span class="bar" style="width: 33.3%"></span>
</div>

.meter .label {
    position:absolute;
}
.meter .bar {
    margin-left:4em;
}

.meter span {
  position: absolute;
  left: 50px; /* adjust to fit label length */
}