Как я могу создать сетку 3x3, содержащую 9 входных текстовых полей без двойной ширины границы?

Я сделал квадрат input содержит 3 строки и 3 столбца. Но пересеченные границы между каждыми двумя полями ввода имеют двойную толщину, потому что одна из границ перекрывается на другой границе, и это создает двойную толщину границы. Этот случай можно легко понять, запустив html ниже. Как я могу сделать границы только одной строкой?Как я могу создать сетку 3x3, содержащую 9 входных текстовых полей без двойной ширины границы?

.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

Вы можете сделать это путем удаления границы только из определенных элементов. Самый простой способ сделать это - использовать псевдо-селектор для элементов, который выбирает элементы 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

Это хорошо, но сложно обобщить и занимает столько кода. В приведенном выше ответе 'outline' @ satinez мне кажется лучше. Спасибо –

Насколько я понимаю, я обновил ответ с помощью метода, который проще обобщить, и с тем, который использует свойство 'outline'. – Pandaqi

и можно попробовать с п-го ребенка селектор псевдо :)

источник

2016-05-14 20:47:36 satinez

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

Я использовал 'outline' в стиле ввода коробки и теперь коробки имеют одинаковую толщину на его наружной стороне. Но он немного толст, даже размер 'outline' равен 1px. Есть ли более низкие измерения, чем 1px? Кстати, я предлагаю вам обновить свой ответ с комментариями выше, чтобы быть приемлемым. –

Помните, что поля ввода автоматически имеют границу для них в большинстве браузеров. Свойство 'outline' просто добавляет границу в поле. Итак, установите 'border: 0;', чтобы получить самый тонкий размер, который вы можете получить. Вы не можете пойти ниже 1px: p – Pandaqi

Как я могу создать сетку 3x3, содержащую 9 входных текстовых полей без двойной ширины границы?

ответ

Смежные вопросы