Класс CSS будет применен к элементу div, отличный от элемента div, и отличается от элемента кнопки

-1

Я работаю над проектом, и у меня есть страница с 3 кнопками. Первая кнопка - тег кнопки, а остальные 2 - теги div. Я использовал класс для этих двух div, чтобы они выглядели как тег кнопки. Проблема в том, что я написал те же правила CSS для тега кнопки и div с классом, но, как вы можете видеть на фотографии ниже, они не совпадают.Класс CSS будет применен к элементу div, отличный от элемента div, и отличается от элемента кнопки

Problem with div and button class

Вот мой код: HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Δομημένος προγραμματισμός</title> 
    <meta charset="utf-8"/> 
</head> 
<body> 
<button onclick="exercise()">Click me</button> 
<div class="button" onclick="klimakoti()">Klimakoti xreosi</div> 
<div class="button" onclick="hw()">Height and weight</div> 
</body> 
</html>

CSS:

button{ 
    border: 0px; 
     padding: 15px; 
     font-size: 18px; 
     color: green; 
     font-style: italic; 
     border-radius: 6px; 
     border-left:4px dashed #f22aa9; 
} 
    .button{ 
     border: 0px; 
     padding: 15px; 
     font-size: 18px; 
     color: green; 
     font-style: italic; 
     border-radius: 6px; 
     border-left:4px dashed #f22aa9; 
    }

Пожалуйста, помогите мне !!!

источник

2014-09-26 Anonymous

который один вид, как он должен? –

Я хочу, чтобы другие 2 тега div выглядели как кнопка «Click me» – 2014-09-26 14:10:08

Вы должны использовать цвет фона, чтобы переопределить браузер по умолчанию:

button, .button { 
    border: 0px; 
    padding: 15px; 
    font-size: 18px; 
    color: green; 
    font-style: italic; 
    border-radius: 6px; 
    border-left:4px dashed #f22aa9; 
    background-color: transparent; 

}

редактировать — если вы хотите <div> элементы, чтобы выглядеть как кнопки, а не наоборот, вы должны сделать несколько других вещей:

button, .button { 
    border: 0px; 
    padding: 15px; 
    font-size: 18px; 
    color: green; 
    font-style: italic; 
    font-family: sans-serif; 
    border-radius: 6px; 
    border-left:4px dashed #f22aa9; 
    background-color: #ddd; 
    margin: 0; 
    display: inline-block; 
}

Я убедилась, что семейство шрифтов является то же самое, и что они отображаются в виде встроенных элементов.

источник

2014-09-26 14:06:18 Pointy

Не работает !!! Я хочу сделать теги div 2 похожими на кнопку «click me» – 2014-09-26 14:07:48

Также вы можете добавить 'outline : none; ' –

Это работает для фона, но не для шрифта –

Вы должны добавить цвет фона и установить тип отображения в встроенный блок (, который, по моему мнению, является отображением кнопок по умолчанию).

button, .button { 
    border: 0px; 
    padding: 15px; 
    font-size: 18px; 
    font-family:arial; 
    color: green; 
    font-style: italic; 
    border-radius: 6px; 
    border-left:4px dashed #f22aa9; 
    background-color: grey; 
    display:inline-block; 

}

Вот конечный результат: http://jsfiddle.net/h25h5oz5/

источник

2014-09-26 14:11:28 siabaJS

Также установите «font-family». – Pointy

Сделано :), а также я только понял, что забыл добавить маржу. – siabaJS

Вы должны убедиться, что вы добавили цвет фона и добавил дисплей: встроенный-бл

источник

2014-10-02 19:59:07

Класс CSS будет применен к элементу div, отличный от элемента div, и отличается от элемента кнопки

ответ

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