Как сделать 3 текстовых поля на одной и той же линии и выровнены по центру

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

Я могу использовать margin-left и margin-right установить текстовое поле в середине, а затем с помощью position:absolute и left:0 Я могу получить текстовое поле на левой стороне (на той же линии, что и средний ящик).

Теперь проблема в последнем поле, в правом поле. Используя position:absolute и right:0, позиционирует поле справа, но показывает одну строку ниже.

Я не могу понять, что я делаю неправильно, и, честно говоря, я не знаю, как position:absolute и left:0 сделали элемент отображаемым в той же строке, что и средний элемент.

#sectionM, 
 
#sectionL, 
 
#sectionR { 
 
    width: 250px; 
 
    border: 1px outset black; 
 
    padding: 5%; 
 
    text-align: center; 
 
} 
 
#sectionM { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#sectionL { 
 
    position: absolute; 
 
    left: 0px; 
 
} 
 
#sectionR { 
 
    position: absolute; 
 
    right: 0px; 
 
} 
 
header { 
 
    text-align: center; 
 
} 
 
nav { 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Misha's Homepage</title> 
 
    <link rel="stylesheet" type="text/css" href="mainstyle.css"> 
 
</head> 
 

 
<header> 
 
    <h1>Hi!</h1> 
 
</header> 
 

 
<nav><a href="archive/myFirstWebpage/mainPage.html">Archive</a> 
 
</nav> 
 

 
<article> 
 
    <section id="sectionL"> 
 
    This is the left LEFT. 
 
    </section> 
 

 
    <section id="sectionM"> 
 
    This is the mid MID. 
 
    </section> 
 

 
    <section id="sectionR"> 
 
    This is the right RIGHT. 
 
    </section> 
 
</article> 
 

 
</html>

источник

2015-05-05 mad.meesh

Есть так много способов сделать это. Вот решение использования inline-block, так как оно отзывчивое и хорошо работает почти во всех браузерах.

http://jsfiddle.net/kop21mbg/

body { 
 
    text-align: center; 
 
} 
 
nav { 
 
    margin-bottom: 1.5em; 
 
} 
 
article { 
 
    font-size: 0; /*fix white space*/ 
 
} 
 
article > section { 
 
    font-size: 16px; 
 
    display: inline-block; 
 
    width: 250px; 
 
    border: 1px outset black; 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
}

<header> 
 
    <h1>Hi!</h1> 
 
</header> 
 
<nav> 
 
    <a href="#">Nav item</a> 
 
</nav> 
 
<article> 
 
    <section>This is the left box.</section> 
 
    <section>This is the mid box.</section> 
 
    <section>This is the right box.</section> 
 
</article>

В случае, если вы не хотите, чтобы быть отзывчивым, добавьте следующий стиль.

article { 
    width: 750px; 
}

источник

2015-05-05 21:53:52 Stickers

спасибо за ваш ответ, но я немного смущен вашим примером. В вашем примере html вы все еще используете id = "sectionL" и т. Д., Но в вашем примере CSS у вас нет этих идентификаторов. поэтому я не вижу, как это работает. Единственное, о чем я могу думать, это то, что даже если в CSS нет идентификаторов, html-код будет работать с тем, что у него есть (в разделе статьи>). –

@ user4844024 Я просто удалил их из образца выше, поэтому не путать его, причина в том, что нет необходимости использовать их там или, может быть, даже в вашем реальном проекте. Существует отличный путеводитель из MDN [Начало работы с CSS] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started), вы узнаете много от него. Общая «позиция» не является хорошим выбором для использования в этом виде макета. – Stickers

Как сделать 3 текстовых поля на одной и той же линии и выровнены по центру

ответ

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