Как мне создать равный интервал между всеми моими кнопками заголовка?

Question

Как мне создать равный интервал между всеми моими кнопками заголовка?

0

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

Мой стиль CSS

.MainHeader{
    height:100px;
    width:688px;
    padding:inherit;
    border:1px solid blue;
    background-color:black;
    }
.BodyContainer{
    height:788px;
    width:688px;
    padding:inherit;
    border: 1px solid blue;
    background-color:white;
    }
.MainFooter{
    height: 100px;
    width: 688px;
    padding:inherit;
    border: 1px solid blue;
    background-color:black;
    }
.Button{
    display:block;
    height:30px;
    width:150px;
    padding :0px 5px;
    background:darkorange;
    border:1px solid black;
    color:white;
    text-align:center;
    font:bold 14px/30px arial;
    background: linear-gradient(white, blue);
    border-radius: 5px;
    }
a.Button{
    text-decoration: none;
    }

a.Button:hover{
    background: grey;
    }
ul{
    padding: 0;
    }
li{
    list-style:none;
    display:inline-block;
    margin-right: 8.6px;
margin-left: 8.6px;
}

Мой HTML-код

<div class="MainHeader">
    <div>
    <div>
        <ul>
        <li><a class="Button" href="http://www.google.com">Homepage</a></li>
        <li><a class="Button" href="http://www.google.com">Search</a></li>
        <li><a class="Button" href="http://www.google.com">Contact Us</a></li>
    </ul>
    </div>
</div>
</div>

user3052646 01 дек. 2013, в 18:02

Источник

1

Вы пробовали поля? Звучит как хороший вариант - но зачем спрашивать? Это довольно легко проверить, у вас были проблемы с этим?
SmokeyPHP 01 дек. 2013, в 16:41
0

Я знаю, как сделать это с полями, но, поскольку я новичок, я хотел знать, является ли маржа лучшим / правильным способом сделать это или есть лучшие способы сделать это.
user3052646 01 дек. 2013, в 16:49

Теги:

html

css

1 ответ

Ещё вопросы

Вы пробовали поля? Звучит как хороший вариант - но зачем спрашивать? Это довольно легко проверить, у вас были проблемы с этим?
Я знаю, как сделать это с полями, но, поскольку я новичок, я хотел знать, является ли маржа лучшим / правильным способом сделать это или есть лучшие способы сделать это.

webdev-dan · Answer 1 · 2013-12-01T14-24-00.000Z

есть много способов сделать это. один - внесение некоторого запаса:

li{
  list-style:none;
  display:inline-block;
  margin-right:10px;
}

нет такой вещи, как "правильный способ" делать такую вещь, но обычным способом является установление разницы

В приведенном выше коде мой контейнер заголовка имеет ширину 688 пикселей. Каждая из кнопок имеет ширину 212 пикселей (всего 636 пикселей), теперь я попытался добавить левое поле и правое поле размером 8,66, но при этом отображается одна из кнопок на кнопке. Что я делаю неправильно? {стиль списка: нет; Дисплей: встроенный блок; поле справа: 8,6 пикселя; поле слева: 8,6 пикселя; }
если вы установите все свои размеры и поля на кнопке .button - и установите все поля и отступы на 0 для ul и li - вам будет легче рассчитать общую ширину ваших кнопок. Я думаю, что для вас лучше всего будет щелкнуть правой кнопкой мыши (в браузере) на кнопке и выбрать «осмотреть» - затем на панели ниже попробуйте вкладку «вычисленные стили» - где вы можете изменить размеры и посмотреть, что произойдет.