1. 首頁
  2. 問答
  3. 爲什麼元素寬度與位置不同：相對？

爲什麼元素寬度與位置不同：相對？

2015-09-08 69 views
2

如果我從錨元素中刪除position: relative;，則所有元素具有相同的寬度，但其位置爲：relative;他們是不同的大小？爲什麼元素寬度與位置不同：相對？

前2個元素~48px，第三個元素~44px。 我該如何解決它？

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"; 
 

 
a { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    background-color: #000; 
 
    border: none; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    margin-right: 20px; 
 
    outline: none; 
 
    padding: 0.75em 0.75em 0.75em 0.75em; 
 
    text-decoration: none; 
 
    position: relative; 
 
}
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i> 
 
</a> 
 

 
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i> 
 
</a> 
 

 
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i> 
 
</a>

來源

2015-09-08 kovalevsky

+0

「我怎樣才能解決這個問題」 還有什麼解決？什麼是你打的標誌？他們需要寬度嗎？這可以設置在CSS和行內塊他們？ – atmd

+1

對我來說（Firefox）'position：relative'沒有區別。但是當你刪除''和''之間（之前和之後）的空白時，問題就沒有了。 – Boldewyn

+1

這不是因爲「位置：相對」 - 你在元素之間有空格，這就是說 - [jsfiddle]（http://jsfiddle.net/np3av855/1） – Vucko

回答

2

我總是發現內聯元素出現異常將填充添加到他們的時候，如果你只是做錨inline-block的，它也將解決你的問題：

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"; 
 

 
a { 
 
    display:inline-block; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    background-color: #000; 
 
    border: none; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    margin-right: 20px; 
 
    outline: none; 
 
    padding: 0.75em 0.75em 0.75em 0.75em; 
 
    text-decoration: none; 
 
    position: relative; 
 
}
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i> 
 
</a> 
 

 
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i> 
 
</a> 
 

 
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i> 
 
</a>

來源

2015-09-08 09:32:15 Pete

1

position:relative不是一個引起問題，但HTML的格式。試着這樣寫的：

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"; 
 
a { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    background-color: #000; 
 
    border: none; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    margin-right: 20px; 
 
    outline: none; 
 
    padding: 0.75em 0.75em 0.75em 0.75em; 
 
    text-decoration: none; 
 
    position: relative; 
 
}
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i></a> 
 
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i></a> 
 
<a href="#"> 
 
    <i class="fa fa-fw fa-anchor"></i></a>

來源

2015-09-08 09:22:48

+1

你的變體也很棒，但是在將來這個標記將由php生成，所以我無法控制格式。 – kovalevsky

相關問題

 相關問題