Как равномерно распределить эти ссылки в моем div на div?

Я хотел бы равномерно разместить 3 ссылки («О», «Часы», «Контакт») внутри содержащего div «banLinks». Я не хочу использовать какой-либо список.Как равномерно распределить эти ссылки в моем div на div?

Я хотел бы, чтобы каждая ссылка была равномерно распределена, взяв 1/3 их контейнера. Я очень новичок в HTML и CSS, и я не уверен, как это сделать.

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

<body> 
<div id="wrapper"> 



<div class="bruceBanner"> 
<a href="#"> 
    <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553"  height="172"> 
    </a> 
</div> 

<nav> 
<div class="banLinks"> 
<a id="about" href="#">About</a> 
<a id="hours" href="#">Hours</a> 
<a id="contact" href="#">Contact</a> 
</div> </nav> 


</div><!-- .wrapper--> 
</body>

CSS:

#wrapper { 

} 

.bruceBanner img { 
border: 2px solid black; 

height: 172px; 
width: 553px; 
display: block; 
margin: 0 auto; 
} 

.banLinks { 
border: 2px solid black; 
width: 553px; 
text-align: center; 
margin: 0 auto; 
} 


#about, #hours, #contact { 
font-size: 20px; 
border: 2px solid blue; 

}

Вот jsfiddle. https://jsfiddle.net/yuy84gmq/6/

источник

2016-03-04 MJH

вы можете сделать это с помощью flexbox. Есть как следует:

.banLinks { 
    border: 2px solid black; 
    width: 553px; 
    text-align: center; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-around; //or space-between whatever you like best 


}

JSfiddle: https://jsfiddle.net/yuy84gmq/10/ Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

источник

2016-03-04 17:02:02 jasper

Я думаю, что вы пропустили часть * «Я бы хотел, чтобы каждая ссылка была равномерно распределена, ** взяв 1/3 их контейнера **» * ... в любом случае, я уже предоставил решение flexbox. –

Да, это не единственное решение для flexbox :), я добавил ваши отзывы к j-скрипке, они теперь все 33% их контейнера, обратите внимание, что это своего рода хак и уродливое кодирование, почти такое же, как любой из наших flexbox решения. https://jsfiddle.net/yuy84gmq/12/ – jasper

Добавьте к этому стилю:

.banLinks { 
    border: 2px solid black; 
    width: 553px; 
    text-align: center; 
    margin: 0 auto; 
    padding: 0; 
} 
.banLinks a{ 
    width: calc(33% - 4px); 
    display: inline-block; 
    margin: 0; 
}

источник

2016-03-04 16:26:38

-1

Вместо обычных a ссылок, поместите их в список и задать список, чтобы быть инлайн. Затем вы можете применить маржу к элементам списка, чтобы освободить их.

HTML

<nav> 
<ul class="banLinks"> 
<li><a id="about" href="#">About</a></li> 
<li><a id="hours" href="#">Hours</a></li> 
<li><a id="contact" href="#">Contact</a></li> 
</ul> 
</nav>

CSS

.banLinks li { display:inline-block;margin:0 10px;} /* Adjust left/right margin as appropriate */

источник

2016-03-04 16:27:47 Lee

Пожалуйста, объясните downvote? – Lee

Используйте таблицу отображения

.banLinks { 
    display:table; 
    table-layout:fixed; 
    border: 2px solid black; 
    width: 553px; 
    text-align: center; 
    margin: 0 auto; 

} 
.banLinks a { 
    display:table-cell; 
}

Вот скрипка: https://jsfiddle.net/yuy84gmq/8/

источник

2016-03-04 16:30:59 Daniel

Несколько вариантов здесь ... и of whic h, независимо от количества элементов списка ... при условии, что имеется достаточная ширина.

Дисплей: Таблица-элементная

.banLinks { 
 
    border: 2px solid black; 
 
    width: 553px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    display: table; 
 
} 
 
.banLinks a { 
 
    display: table-cell; 
 
    border: 1px solid grey 
 
}

<div class="banLinks"> 
 
    <a id="about" href="#">About</a> 
 
    <a id="hours" href="#">Hours</a> 
 
    <a id="contact" href="#">Contact</a> 
 
</div>

Flexbox

.banLinks { 
 
    border: 2px solid black; 
 
    width: 553px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    display: flex; 
 
} 
 
.banLinks a { 
 
    flex: 1; 
 
    border: 1px solid grey 
 
}

<div class="banLinks"> 
 
    <a id="about" href="#">About</a> 
 
    <a id="hours" href="#">Hours</a> 
 
    <a id="contact" href="#">Contact</a> 
 
</div>

источник

2016-03-04 16:33:59

Как равномерно распределить эти ссылки в моем div на div?

ответ

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