防止在更改字體時移動文本重量

最近我一直在使用酷酷的設計。其中一個功能的工作方式是，雖然選中了複選框，但其字體將變爲粗體。問題是，在改變字體的重量的同時，它會移動另一個元素。任何想法如何防止它沒有定位與絕對位置標籤。我創建了一個顯示問題的剪輯。防止在更改字體時移動文本重量

li{ 
 
    list-style:none; 
 
    display:inline-block; 
 
    margin-right:20px 
 
} 
 

 
input[type="checkbox"]:checked + label{ 
 
font-weight:bold; 
 
}

<ul> 
 
    <li> 
 
    <input type="checkbox" id="test"> 
 
    <label for="test"> My label 1 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="test2"> 
 
    <label for="test2"> My label 2 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="test3"> 
 
    <label for="test3"> My label 2 
 
    </li> 
 
</ul>

來源

2016-11-29 El Danielo

可能是helllful - [內聯元素轉移時，懸停大膽]（https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover），這個想法是爲粗體（或任何：懸停狀態樣式）內容保留空格：在僞元素之後並使用標題標記作爲內容源。 – Ankit

設置你渲染文字的元素的寬度。 –

使用text-shadow模仿的效果：

li { 
 
    list-style:none; 
 
    display:inline-block; 
 
    margin-right:20px 
 
} 
 

 
input[type="checkbox"]:checked + label{ 
 
    text-shadow: 1px 0 0 currentColor; 
 
}

<ul> 
 
    <li> 
 
    <input type="checkbox" id="test"> 
 
    <label for="test"> My label 1 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="test2"> 
 
    <label for="test2"> My label 2 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="test3"> 
 
    <label for="test3"> My label 2 
 
    </li> 
 
</ul>

來源

2016-11-29 14:35:26 Roberrrt

好主意 - 我喜歡！ – connexo

您可以使用一個小的CSS破解這一點。

就像（這將是字體特定）：

input[type="checkbox"]:checked + label{ 
    font-weight: bold; 
    display: inline-block; 
    margin-right: -2.8px; /* cancel the margin on right that is produced */ 
}

看一看下面的代碼片段：

li{ 
 
    list-style:none; 
 
    display:inline-block; 
 
    margin-right:20px 
 
} 
 

 
input[type="checkbox"]:checked + label{ 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    margin-right: -2.8px; 
 
}

<ul> 
 
    <li> 
 
    <input type="checkbox" id="test"> 
 
    <label for="test"> My label 1</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="test2"> 
 
    <label for="test2"> My label 2</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="test3"> 
 
    <label for="test3"> My label 2</label> 
 
    </li> 
 
</ul>

希望這有助於！

來源

2016-11-29 14:43:23

當您希望爲用戶提供儘可能最好的體驗時，可能是最好的解決方案，但在更改字體，尺寸等時很難維護。 upvoted雖然。 – Roberrrt

也許你會嘗試引導，有了它，你可以說：

<div class="col-md-4"> 
<!--CHECKBOX HERE--> 
</div> 
<div class="col-md-4"> 
<!--CHECKBOX HERE--> 
</div> 
<div class="col-md-4"> 
<!--CHECKBOX HERE--> 
</div>

或者你自己做這件事，並說： HTML：

<div class="myClass"> 
<!--CHECKBOXES HERE--> 
    </div> 
    <div class="myClass"> 
<!--CHECKBOXES HERE--> 
    </div> 
    <div class="myClass"> 
<!--CHECKBOXES HERE--> 
    </div>

CSS：

.myClass { 
width:33.33333%; 
}

希望我能幫助你:)

編輯

你也可以給一個div幾類：

<div class="myClass1 myClass2 myClass3"> 
</div>

所以你不要有增加的寬度在每一個CSS規則。

來源

2016-11-29 14:58:31 cais

這對於這樣一個小問題有點矯枉過正。 – Roberrrt

是的，你是對的 - 但是當你習慣了這個程序時，你會發現更容易 – cais

防止在更改字體時移動文本重量

回答

相關問題