兩個CSS排版的小問題：margin置中、width:100%超出父層

css css教學網頁設計網頁

Oo_花之舞__oO 2023-01-12 00:23:12 ‧ 1672 瀏覽

分享至

我把code丟到codepen

https://codepen.io/flwrtykd-the-scripter/pen/YzjVpRO

.input{
    width: 100%;
}

這個東西放在container裡面，照理說100%應該是填滿，怎麼會超出一點點呢？
2.該怎麼解決，只能數字調小嗎？

https://codepen.io/flwrtykd-the-scripter/pen/ZEjKBPL

.input{
    width: 50%;
    margin: 0 auto;
}

查一些資料發現可以用marin置中，
不過卻沒有作用。

想請問一下為什麼沒有作用？解決方法是只能手動調數字嗎？

以上兩個CSS小問題，謝謝各位排版大師。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

小哈片刻

iT邦研究生 4 級 ‧ 2023-01-12 01:33:27

最佳解答

原因是你的input有加padding，這時input的真正寬度會等於100%+padding
所以要讓input的寬度等於style裏設定的寬度，就要在input的樣式加上box-sizing: border-box;
原因是input預設的display不是block，你可以把input樣式裏加上display:block;

回應 7
分享
檢舉

看更多先前的回應...收起先前的回應...

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-01-12 02:53:52 檢舉

1.您好，若有padding應該會足夠大，能覆蓋，邏輯是否不太對？
實測也發現padding:0沒有變動。
2.可行耶！學習到了，感恩。

小哈片刻 iT邦研究生 4 級 ‧ 2023-01-12 03:34:00 檢舉

1的話，那可能是你更外層有margin
比如下面這樣的話，因為預設的body樣式會有一點margin，就會造成問題

<body>
    <input style="width:100%">
</body>

可以改成

<body style="margin:0">
    <input style="width:100%">
</body>

小哈片刻 iT邦研究生 4 級 ‧ 2023-01-12 04:22:57 檢舉

因為width要看受到哪一層的影響，所以可能要看你完整的html節點比較容易看出問題。

小哈片刻 iT邦研究生 4 級 ‧ 2023-01-12 04:29:20 檢舉

不好意思，剛剛發現你有坡codepen, 我已經改了答案了。
這裏的問題是有加padding情況下，input的真正寬度會等於 100% + padding
要讓真正的寬度等於style設定的width，那要加上 box-sizing: border-box;

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-01-12 05:10:13 檢舉

@小哈片刻謝謝您，還真的！
好屌喔！
最近學的時候的確已經知道「box-sizing: border-box;」是調排版。
但還沒完全搞懂他的概念，我有特別筆記起來。

我看人家開玩笑說，跑掉後用這個排版就沒問題XDDDD

結果實際上還滿準確的(笑

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-01-12 05:34:35 檢舉

@小哈片刻
剛剛花點時間看您的鐵人賽文章、網站、YT等，發現是個大人物！
天啊，完全就是我小時候崇拜的那種程式設計師欸。
好羨慕大大鐵人賽的專業文章，完全就是偶像。
學習了，看來我這菜鳥，還要很努力很努力...

非常喜歡您的文章跟影片，未來會持續關注、支持的。

小哈片刻 iT邦研究生 4 級 ‧ 2023-01-12 18:43:24 檢舉

過獎了啦~
不過聽你這樣講，感到很開心~

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22137 篇

完賽人數

596 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙