如何使用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相對另一個元素定位一個元素

回答

相關問題