CSS, использующий границу с одной стороны, не имеет такую же ширину у конца?

Question

CSS, использующий границу с одной стороны, не имеет такую же ширину у конца?

0

Привет, я пытаюсь реализовать что-то вроде снимок экрана...

Вот что я использую

border-left: 5px solid #7AC0DA;

и это дает мне этот результат

Граница не достаточно четкая, как вы можете видеть на этом скриншоте, граница не имеет такой же ширины рядом с концами. Как это исправить?

Yasser 01 дек. 2013, в 18:13

Источник

0

Верх и низ, имеющие ширину границы, вызывают это
Popnoodles 01 дек. 2013, в 16:41

Теги:

html

css

3 ответа

2

Это связано с тем, что элемент уже имеет границу 1px solid grey, и синий цвет должен расширяться.

Лучше всего было бы не использовать стили границ на input, но что-то вроде следующего:

HTML

<label class="highlight clearfix">
  <span>Field name:</span>
  <input />
</label>

CSS

label span, label input { float: left }
label.highlight span { border-right: 5px solid blue }

Labu 01 дек. 2013, в 13:52

0

Я предполагаю, что где-то есть граница ширины для вашей границы сверху и снизу. Я вижу, что вы устанавливаете границу только слева налево-вниз. Может быть, вы должны сначала попробовать установить границу: 0 и чем в том же селекторе, используйте border-left.

Dan Ovidiu Boncut 01 дек. 2013, в 14:29

Ещё вопросы

Верх и низ, имеющие ширину границы, вызывают это

Popnoodles · Accepted Answer · 2013-12-01T14-51-00.000Z

Граница показывает скос, поскольку верх и низ имеют ширину. Вы можете делать то, что вам нужно, используя псевдоэлемент :before

http://jsfiddle.net/sEWqW/3/

<label><input /></label>

CSS

label {
    border: 1px solid #ccc;
    border-left:0;
    padding:.1em .3em;
    position:relative;
}
label:before {
    display:block;
    content:".";
    color:transparent;
    font-size:0;
    border-left:5px solid #f24495;
    height:100%;
    position:absolute;
    left:0;
    padding:1px 0;
    top:-1px;
    bottom:-1px;
}
label input{
    border:0;
}