css fieldset邊框

你好我有一個在CSS中的fieldset的問題。css fieldset邊框

在這個例子中，你可以看到，左側邊框

margin-left: 0px;

刷新恰好在一行中/高與黑暗的框架。右手邊可以看到類fr有

margin-right: 0px;

不過，這並不與框架邊框沖洗。我曾試圖Google，但我找不到任何內容。這個現象正常嗎？我做錯了什麼？有一些特定的邊界嗎？

UPDATE

你好，謝謝你回答這個問題。我試圖直接在我的編輯器（dreamweaver cs6）中實現該代碼，並認爲它的風格與jsfiddle相同。錯誤。好像有一個與編輯一個問題，因爲作爲一個結果，我會得到這樣的：

cs6 fieldset

它看起來像有左手邊自動添加標籤。那麼是否有人知道這個問題？非常感謝。我不得不重置css的默認設置。

來源

2012-07-18 bonny

我會主要的一點是你的標籤設置爲80px寬，輸入設置爲180px寬。

可能需要它們的尺寸相同。我也會檢查你的數學，以確保它們都合適。

來源

2012-07-18 21:58:00

我檢查了它，應該有足夠的空間。該字段的寬度爲440px。減去180倍的輸入寬度的兩倍意味着360px使得80px的空間。減去10px填充左邊將是70px。所以我更新了我的問題，似乎編輯器可能存在問題。謝謝。 – bonny 2012-07-19 08:04:00

將box-sizing: border-box添加到輸入。（同時添加-moz-box-sizing和-webkit-box-sizing爲相關供應商）

來源

2012-07-18 17:02:34

我更新了我的問題。謝謝。 – bonny 2012-07-19 08:06:02

使用此相反，箱上漿：邊界框使得從所述輸入元件，而不是外部內部使用的填充。

#left #frame form fieldset ul input { 
position:relative 
color: #444444; 
font-size: 10px; 
width: 180px; 
height: 18px; 
padding-left: 5px; 
outline:none; 
box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-o-box-sizing:border-box 
}

來源

2012-07-18 17:04:41

我更新了我的問題。謝謝 – bonny 2012-07-19 08:05:46

yes box-sizing：border-box;是一個很好的解決方案，但只需減小輸入框7像素的大小（左側填充爲5px，左側和右側邊框的邊框爲2px），所以現在最終輸入框的寬度爲173px

來源

2012-07-18 19:01:02

我更新了我的問題。謝謝。 – bonny 2012-07-19 08:08:24

是的，你應該使用reset css來重置html標籤的所有默認屬性（如input，fieldset）。 – 2012-07-19 11:54:51

它看起來像你想把一些輸入字段（一種形式，也許？）成列，似乎並不知道最好的方式來做到這一點？

我正在處理一個表單，實際上 - 當我想在一個div內有兩列時，我是這麼做的。

<form> 
    <fieldset> 
    <legend>The form to fill out</legend> 
     <p> Any instructions for the form. Fields marked with <span class="red">Red</span> are required.</p> 

    <div class="columnA"> 
     <label for="fname">Label 1</label> 
     <input type="text" name="fname" tabindex="1" /> 
    </div> 

    <div class="columnB"> 
     <label for="address1">Address:</label> 
     <input type="text" name="address1" tabindex="10" /> 
    </div> 

    <div class="fullwidth"> 
     <input type="submit" value="Register"/> 
    </div> 
    </fieldset> 
</form>

然後，確保這些東西都設置（最小）在你的CSS上述每一類：

保證金填充寬度

（建議：其實，我設置這些第一在我的CSS的每一塊內 - 它給了我一個結構，如果我有我自己的CSS元素順序，我不是說使用我的CSS，而是採用你自己的方法 - 當你排除故障時可以節省時間）

記住，一世如果你想要父元素（不管div是否包含表單），所有的子元素也必須被浮動。

現在，您可能會認爲將columnA向左浮動並且columnB向右浮動，一旦添加了邊距和填充，兩者的寬度都會增加50％。但是，我發現除非我的內容需要那麼多的房地產，否則實際上可以向左移動，並且您將更好地查看整個表格。

來源

2012-07-19 13:25:11

css fieldset邊框

回答

相關問題