如何製作包含9個沒有雙邊框厚度的輸入文本框的3x3網格框？

我做了一個包含3行3列的input正方形。但是每個兩個輸入框之間的相交邊框具有雙倍厚度，因爲其中一個邊框在另一個邊框上重疊，並且這會產生雙邊框厚度。通過運行下面的html，可以輕鬆擴展此案例。我怎樣才能使邊界只有一條線？如何製作包含9個沒有雙邊框厚度的輸入文本框的3x3網格框？

.container{ 
 
    float:left; 
 
    margin-top: 20px; 
 
    width: 90px; 
 
} 
 
.box { 
 
    color: darkgreen; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 30px; 
 
    height: 30px; 
 
    box-sizing: border-box; 
 
    border: 1px solid gray; 
 
    color:gray; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Title</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
      <input class="box" type="text""><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"> 
 
</div> 
 
</body> 
 

 
</html>

來源

2016-05-14 Ali Tor

您可以通過只對某些元素去掉邊框這樣做嘗試。最簡單的方法是在元素上使用nth-child()僞選擇器，該選擇器根據子元素的順序選擇HTML元素。下面的代碼應該工作：

/* Add left and top border to all cells */ 
.box { 
    border: 0; 
    border-left: 1px solid gray; 
    border-top: 1px solid gray; 
} 

/* Add right border to elements at the end of rows */ 
.box:nth-child(3n) { 
    border-right: 1px solid gray; 
} 

/* Add bottom border to elements at the bottom */ 
.box:nth-child(n+7) { 
    border-bottom: 1px solid gray; 
}

或者，你可以使用outline屬性，它增加了一個邊框爲元素的邊緣。請務必將border屬性本身設置爲0，以避免比預期更厚的邊框。該代碼將是這樣的：

.box { 
    border: 0; 
    outline: 1px solid gray; 
}

來源

2016-05-14 21:00:20 Pandaqi

這很好但很難概括並且需要很多代碼。在上面，@ satinez的回答'outline'似乎對我更好。謝謝 –

我明白了，我已經用更容易概括的方法更新了答案，並且使用了'outline'屬性。 – Pandaqi

ü可以用第n個孩子僞選擇:)

來源

2016-05-14 20:47:36 satinez

http://jsfiddle.net/ookb997e/ – satinez

我以前在輸入框樣式'outline'現在盒具有在其外部相同的厚度。但即使「輪廓」大小爲1px，它也有點厚。有沒有比1px更低的測量值？順便說一下，我建議你用上面的評論更新你的答案是可以接受的。 –

請記住，在大多數瀏覽器中，輸入字段自動具有邊框。「outline」屬性只是在邊距中添加邊框。所以，設置'border：0;'來獲得最薄的尺寸。你不能低於1px：p – Pandaqi

如何製作包含9個沒有雙邊框厚度的輸入文本框的3x3網格框？

回答

相關問題