2015-03-30 3 views
1

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

HTML:

<div class="bottomborder"></div> 

CSS:

.bottomborder { 
    background-color: black; 
    width: auto; 
    height: auto; 
    height: 20px; 
    margin-left: -20px; 
    margin-right: -20px; 
} 
+4

Вы можете сделать снимок экрана с тем, что вы говорите? –

+1

Ваш вопрос не подходит, но для создания черной нижней границы. например. [border-bottom: 1px solid black]; –

+0

Постарайтесь убедиться, что нет других элементов, которые могут добавлять нежелательные поля или дополнения к вашему макету. это сложно сказать без остальной части кода. – Kinburn101

ответ

2

Что именно вы хотите?

Ваша информация и код не является достаточным еще Пожалуйста, смотрите эту Demo

.bottomborder 
 
{ 
 
    background-color: black; 
 
    width: auto; 
 
    height: auto; 
 
    height: 20px; 
 
    margin-left: -20px; 
 
    margin-right: -20px; 
 
    border-bottom:2px solid red; 
 
}
<div class="bottomborder"></div>

Примечание: Ваш не закрываем <div> правильно

+1

У вас есть право редактировать вопрос, по которому вы исправляете ошибку div1. Обычно это плохая идея. Возможно, исходная проблема с OP - это то, что вы исправляете. Если это так, то этот вопрос теряет смысл. – vals

0

Вы можете сделать это легко inspecting element. Также предложен способ Rawat.

Посмотри здесь: -

<div class="bottomborder" id="div1"></div> 

CSS: -

.bottomborder { 
     background-color: black; 
     width: auto; 
     height: auto; 
     height: 20px; 
     margin-left: -30px; 
     margin-right: -30px; 
     border-bottom: 2px solid green; 
    } 

Смотрите Working demo здесь

Надеются, что это помогает

+0

хорошо. его не совсем как я хочу. я имею в виду, у меня есть граница под моей границей, которая имеет тот же цвет, что и мой фон. и я пытаюсь убрать это. – Bear312

0

Просто используйте границу вместо фонового цвета например:

HTML:

<div class="bottomborder"></div> 

CSS:

.bottomborder { 
    background-color: none; 
    width: auto; 
    margin-left: -20px; 
    margin-right: -20px; 
    border-bottom: 20px solid #000; 
} 

P.S. вы указали два свойства высоты 20px, а также auto на div.

0

Попробуйте это:

CSS

.border-bottom{ 
    border-bottom: 1px solid #000000; 
} 

HTML

<div class="border-bottom"> 
    <p>Hello World</p> 
</div> 

See demo jsFiddle I create you

Вы можете добавить в ваши дополнительные стили, а также, y не должно влиять на границу.

Надеюсь, что поможет

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