老師，能提供作業(yè)的答案嗎？
怎么實現(xiàn)居中沒思路
雪糕易化_0
2018-09-10
4 回答
舉報
0/150
提交
取消
怎么實現(xiàn)居中沒思路
2018-09-10
舉報
2018-09-10
你好，思路是通過js進行運算實現(xiàn)，以左邊為例：
左側(cè)preview的寬度設(shè)為：leftW
右側(cè)每一個item的寬度設(shè)為：itemW
左側(cè)預覽文本的寬度設(shè)為：charW
所以需要實現(xiàn)居中，需要將左側(cè)預覽文本設(shè)置一個marginLeft
marginLeft =?((leftW + itemW / 2) - charW) / 2
具體的源碼實現(xiàn)在后續(xù)課程中會有，敬請期待：）
2019-09-15
對左右兩側(cè)的 .preview 設(shè)置 position: relative (通過relative來實現(xiàn)平移居中)
字符 "A" 顯示不居中,無非是多了隱藏起來的一截 .line 的長度
所以想看讓 "A" 看起來居中的話, 其實很簡單, 只要將其平移? .line 長度的一半 即可.
-----------------------------------------------------------------------
具體做法, 可以通過 this.$ref.xxx.offsetWidth ,先獲取到 .select 的整個寬度(就是除了左右兩邊 .preview 以外的總寬度)
再用 .select 的總寬度 ÷ fontSizeList 數(shù)組的長度 得到每一個 .select-wrapper (即: 線點線) 的寬度
每一個 .select-wrapper (即: 線點線) 的寬度 ÷ 4 得到 .line 長度的一半
該值就是 左側(cè) .preview 的 style 需要設(shè)置的 left 數(shù)值(左側(cè) .preview 往右平移)
該值就是 右側(cè) .preview 的 style 需要設(shè)置的 right 數(shù)值(左側(cè) .preview 往右平移)
2019-05-26
通過? style 屬性動態(tài)綁定，更方便
比如 當 index === 0? 或 index === fontSizeList.length - 1 時，設(shè)置? 對應(yīng)最左和 最右邊的 line? flex : 0 0 0;
設(shè)置 最左 和最右 的 select-wrapper? flex: 0.5;
就是template 上看上去復雜些
2018-11-05
//?可以用css3樣式實現(xiàn)啊,前提是知道fontSizeList的長度, //?我想的有點復雜,?先算出單個item寬度(100%?-?80px)?/?14; //?然后把preview移到居中的位置?((100%?-?80px)?/?14?+?40px)?/?2; //?最后再往回移動半個preview的距離((100%?-?80px)?/?14?+?40px)?/?2?-?20px; //?具體: .preview?{ ????flex:?0?0?px2rem(40); ????@include?center; ????position:?relative; ????&.left{ ????????left:?calc(((100%?-?80px)?/?14?+?40px)?/?2?-?20px); ???????} ????&.right{ ????????right:?calc(((100%?-?80px)?/?14?+?40px)?/?2?-?20px); ?????} }