如何使用CSS/jQuery相对另一个元素定位一个元素

我打算将title放在下面的代码中心到circle。如何使用CSS/jQuery相对另一个元素定位一个元素

<style> 
*, *:after, *:before { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: "Open Sans"; 
} 


/* Form Progress */ 
.progress { 
    width: 1500px; 
    margin: 20px auto; 
    text-align: center; 
} 
.progress .circle, 
.progress .bar { 
    display: inline-block; 
    background: #fff; 
    width: 40px; height: 40px; 
    border-radius: 40px; 
    border: 1px solid #d5d5da; 
} 
.progress .bar { 
    position: relative; 
    width: 100px; 
    height: 6px; 
    top: -33px; 
    margin-left: -5px; 
    margin-right: -5px; 
    border-left: none; 
    border-right: none; 
    border-radius: 0; 
} 
.progress .circle .label { 
    display: inline-block; 
    width: 32px; 
    height: 32px; 
    line-height: 32px; 
    border-radius: 32px; 
    margin-top: 3px; 
    color: #b5b5ba; 
    font-size: 17px; 
} 
.progress .circle .title { 
    color: #b5b5ba; 
    font-size: 13px; 
    line-height: 30px; 
    margin-left: -5px; 
} 

/* Done/Active */ 
.progress .bar.done, 
.progress .circle.done { 
    background: #eee; 
} 
.progress .bar.active { 
    background: linear-gradient(to right, #EEE 40%, #FFF 60%); 
} 
.progress .circle.done .label { 
    color: #FFF; 
    background: #8bc435; 
    box-shadow: inset 0 0 2px rgba(0,0,0,.2); 
} 
.progress .circle.done .title { 
    color: #444; 
} 
.progress .circle.active .label { 
    color: #FFF; 
    background: #0c95be; 
    box-shadow: inset 0 0 2px rgba(0,0,0,.2); 
} 
.progress .circle.active .title { 
    color: #0c95be; 
} 
</style>

这里是我的身体元素与title和circle

<div class="progress"> 
    <div class="circle active"> 
    <span class="label">1</span> 
    <span class="title">Ticket&nbsp;Requested</span> 
    </div> 
    <span class="bar"></span> 
    <div class="circle"> 
    <span class="label">2</span> 
    <span class="title">Ticket&nbsp;Raised</span> 
    </div> 
    <span class="bar"></span> 
    <div class="circle"> 
    <span class="label">3</span> 
    <span class="title">Completed</span> 
    </div> 
</div>

而且我这样做jQuery来改变我的title相对于circle的left，但它不是wotking。

$(document).ready(function(){ 
    for (i=1;i<4;i++){ 
     var pos = $('.progress .circle:nth-of-type(' + i + ')').position(); 
     var widthLabel = $('.progress .circle:nth-of-type(' + i + ') .title').outerWidth(); 
     $('.progress .circle:nth-of-type(' + i + ') .title').css({ 
      position: "aboslute", 
      left: (pos.left - (widthLabel/2)) + "px" 
     }); 
    } 
});

来源

2016-02-09 Shanka

您给出的代码有位置绝对的拼写错误，即使拼写被纠正，它也不会工作，因为它需要相对于圆圈。

尝试使用以下代码

$(document).ready(function(){ 
      for (i=1;i<4;i++){ 
      var widthLabel = $('.progress .circle:nth-of-type(' + i + ') .title').outerWidth(); 
      var widthCircle = $('.progress .circle:nth-of-type(' + i + ')').outerWidth(); 
      $('.progress .circle:nth-of-type(' + i + ') .title').css({ 
       position: "relative", 
       left: -((widthLabel/2) - (widthCircle/2)) + "px" 
      }); 
     } 
    });

标签宽度然后与圆宽度中减去。这将做到这一点

来源

2016-02-09 05:04:17 Arden

完美！谢谢：） – Shanka

你已经拼写位置：“绝对”在你的jQuery错误。

来源

2016-02-09 04:48:32 Beans

我知道这是不是完全answeri这个问题，但这是你会努力获得理想结果的原因。 – Beans

我已经把你的代码移到了小提琴上，但是我没有按照你的意愿去使它工作，而是我没有使用JavaScript就形成了一个稍薄的方法。

https://fiddle.jshell.net/znrr38tv/

随意修改你的重视域

来源

2016-02-09 05:27:58 xzegga

使用此简单的方法

$('.title').each(function(){ 
 
\t var width = $(this).width()/2; 
 
\t $(this).css({marginLeft: -width}); 
 
});

*, *:after, *:before { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    font-family: "Open Sans"; 
 
} 
 

 

 
/* Form Progress */ 
 
.progress { 
 
    /*width: 1500px;*/ 
 
    width: 100%; /*demo use*/ 
 
    margin: 20px auto; 
 
    text-align: center; 
 
} 
 
.progress .circle, 
 
.progress .bar { 
 
    display: inline-block; 
 
    background: #fff; 
 
    width: 40px; height: 40px; 
 
    border-radius: 40px; 
 
    border: 1px solid #d5d5da; 
 
} 
 
.progress .bar { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 6px; 
 
    margin-left: -5px; 
 
    margin-right: -5px; 
 
    border-left: none; 
 
    border-right: none; 
 
    border-radius: 0; 
 
} 
 
.progress .circle{ 
 
    position: relative; /* new changes*/ 
 
} 
 
.progress .circle .label { 
 
    display: inline-block; 
 
    width: 32px; 
 
    height: 32px; 
 
    line-height: 32px; 
 
    border-radius: 32px; 
 
    margin-top: 3px; 
 
    color: #b5b5ba; 
 
    font-size: 17px; 
 
} 
 
.progress .circle .title { 
 
    color: #b5b5ba; 
 
    font-size: 13px; 
 
    line-height: 30px; 
 
    margin-left: -5px; 
 
    /* new changes*/ 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 33px; 
 
} 
 

 
/* Done/Active */ 
 
.progress .bar.done, 
 
.progress .circle.done { 
 
    background: #eee; 
 
} 
 
.progress .bar.active { 
 
    background: linear-gradient(to right, #EEE 40%, #FFF 60%); 
 
} 
 
.progress .circle.done .label { 
 
    color: #FFF; 
 
    background: #8bc435; 
 
    box-shadow: inset 0 0 2px rgba(0,0,0,.2); 
 
} 
 
.progress .circle.done .title { 
 
    color: #444; 
 
} 
 
.progress .circle.active .label { 
 
    color: #FFF; 
 
    background: #0c95be; 
 
    box-shadow: inset 0 0 2px rgba(0,0,0,.2); 
 
} 
 
.progress .circle.active .title { 
 
    color: #0c95be; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="progress"> 
 
    <div class="circle active"> 
 
    <span class="label">1</span> 
 
    <span class="title">Ticket&nbsp;Requested</span> 
 
    </div> 
 
    <span class="bar"></span> 
 
    <div class="circle"> 
 
    <span class="label">2</span> 
 
    <span class="title">Ticket&nbsp;Raised</span> 
 
    </div> 
 
    <span class="bar"></span> 
 
    <div class="circle"> 
 
    <span class="label">3</span> 
 
    <span class="title">Completed</span> 
 
    </div> 
 
</div>

Fiddle

来源

2016-02-09 06:06:12 Krish

如何使用CSS/jQuery相对另一个元素定位一个元素

回答

相关问题