Make checkbox, select and input fields inline
I am trying to make a search bar where a green div would be in the middle of the grey one(see http://codepen.io/anon/pen/LRBEvq?editors=1100), and checkboxes, select drop menu, and input field all inline with two buttons — so everything in the same row. I am using Bootstrap to make it responsive but got stuck and can’t figure it out.. thank you for all the help! Here’s my html:
.main < background-color: grey; width: 1202px; height: 156px; margin: 0 auto; >.formContainer < width: 1140px; height: 85px; background-color: green; >button < height: 37px; width: 160px; >.choice < background-color: lightgrey; height: 37px; >.checkbox < width: 207px; border: 1px solid white; >.choice-select < width: 173px; >.choice-input
Lorem lorem lorem Ipsum lorem ipsum 5 Answers 5
Use display: inline-block; for your wrapper divs to behave like inline elements without losing their block properties:
.mainContent .checkbox, .mainContent .choice-select, .mainContent .choice-input
If you also want the buttons to be in the same row, use a for the whole content.
To center your menu bar horizontally, use margin: 0 auto; ; to center it vertically, position it, apply a top: 50%; and translate it back the half of its size in negative y-direction (up):
To make the input text field as long as the remaining space, just set the width of the input the same as its wrapper div:
.mainContent .choice-input input
.main < background-color: grey; width: 1202px; height: 156px; margin: 0 auto; >.formContainer < width: 1140px; height: 85px; background-color: green; margin: 0 auto; position: relative; top: 50%; transform: translate(0, -50%); >button < height: 37px; width: 160px; >.choice < background-color: lightgrey; height: 37px; >.checkbox < width: 207px; border: 1px solid white; >.choice-select < width: 173px; >.choice-input < width: 390px; >.mainContent .checkbox, .mainContent .choice-select, .mainContent .choice-input < display: inline-block; >.mainContent .choice-input input
Lorem lorem lorem Ipsum lorem ipsum Thank you! I still have a problem with the green rectangle being in the middle of the grey one..I have tried setting its heigh and width to a certain percentage and position but if I manage to do it it breaks when the window is resized. And I can’t get why the input field is not accepting the .choice-input , since it should take the whole space all the way to buttons. Thanks for these advices once again, very helpful!
Horizontal centering:
For horizontal centering, we want the left and right margin to be equal. The way to do that is to set the margins to ‘auto’. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.
Vertical centering:
- Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
- Make the element itself absolutely positioned.
- Place it halfway down the container with ‘top: 50%’. (Note that 50%’ here means 50% of the height of the container.)
- Use a translation to move the element up by half its own height. (The ‘50%’ in ‘translate(0, -50%)’ refers to the height of the element itself.)
So your code may seem like this
I hope you solved all the other problems.
How to align the checkbox and label in same line in html?
Within li tags, I am placing a checkbox and label input. If label text is larger than label, the text goes to the next line. I wrapped the label text but it’s not aligning the checkbox and label in the same line if label text is too long.
13 Answers 13
Wrap the checkbox with the label and check this
You should use for the checkboxes or radios, and to align checkboxes vertical-align is enough
Try changing your markup to this
In case of long text
Side note: In label, value of for must be the id of checkbox.
i tried ur code Dhaval,same issue some of the label text aligning below of the checkbox.remaining all are aligning same line as expected but only few of them not aligning properly.
None of these suggestions above worked for me as-is. I had to use the following to center a checkbox with the label text displayed to the right of the box:
I had the same problem, but non of the asweres worked for me. I am using bootstap and the following css code helped me:
.checkbox-wrapper < white-space: nowrap >.checkbox < vertical-align: top; display:inline-block >.checkbox-label < white-space: normal display:inline-block > I accept whatever you want!
Use below css to align Label with Checkbox
If you are using bootstrap wrap your label and input with a div of a «checkbox» or «checkbox-inline» class.
This answer doesn’t fix the problem. ‘
Just place a div around the input and label.
Выстроить checkbox и label в одну строку
Как вставить checkbox и описание к нему в одну строку, в линию ровно?
div class="w2ui-field w2ui-field2 w2ui-span122"> label style="width: 280px; margin-left: 150px; text-align: left;"> input name="agree" class="w2ui-input" type="checkbox" tabindex="6">span id ="agree_with_cond">Я согласен с условиями/span> a href="agreement.html" target="_blank">span id="agreement">соглашения/span>/a>span id="kazAgree">/span>/label> /div>
Выстроить блоки в одну строку
Вот код. Нужно куда показывает стрелка. <html> <head> <title>Урок 4</title> </head> <body>.
Выстроить таблицы в одну строку
Доброго времени суток. опять нужна помощь. Есть две таблицы. Нужно чтобы они были на одном уровне.
Выстроить элементы списка в одну строку
Здравствуйте, помогите сделать такой вот список в одну строку, нужно только, чтобы email и телефон.
Необходимо выстроить два блока в одну строку
подскажите пожалуйста, как сделать два дива в одну строчку, так чтобы получилось 1+1? ставлю.
Выровнять чекбокс и текст
Есть форма обратной связи. В ней чекбокс и фраза «Я добровольно отправляю свои данные».
Как их выставить в одну строку?
Чекбокс должен быть в , а фраза в — требования SEOшников.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
html lang="ru"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> link rel="stylesheet" type="text/css" href="style/style-svjazi.css"> /head> body> div class="layout3"> div class="content"> div>Описание формы:/div> div class="containerr"> h2>Форма обратной связи/h2> form id="contactForm" action="handler.php" method="post"> div class="field-block"> label for="name">Ваше имя:/label> input id="name" class="field" name="name" required type="text" placeholder="Иванов Иван Иванович"> /div> div class="field-block"> label for="email">Ваш E-mail:/label> input id="email" class="field" name="email" required type="email" placeholder="ivanov@email.com"> /div> div class="field-block"> label for="message">Текст сообщения:/label> textarea id="message" class="field" required name="message" rows="4">/textarea> /div> div class="field-block"> input id="check" name="check" checked type="checkbox"> label for="check">Я добровольно отправляю свои данные/label> /div> button id="button" class="buttonn" type="submit">Отправить/button> div class="result"> span id="answer">/span> span id="loader">img src="images/loader.gif" alt="">/span> /div> /form> /div> /div> /div> include('footer.php'); ?> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
* { /*обнуляем все отступы*/ margin: 0; padding: 0; box-sizing: border-box; } .field-block label { margin-bottom: 10px; text-align: left; } .buttonn { height:70px; width:70%; color: #fff; text-transform: uppercase; letter-spacing: 2px; background-color: #061634; font-size: 16px; border-radius: 2px; display: inline-block; border-width: 2px; border-color: #061634; border-style: solid; } .buttonn:hover { color: #061634; background-color: #fff; } #loader { display: none; } .check-text { font-size: 14px; vertical-align: top; } .field-block textarea { resize: vertical; } .field-block .field:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .field-block .field { font-size: 16px; padding: 8px 12px; line-height: 1.5; border-radius: 2px; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .field-block label, .field-block .field { display: block; width: 100%; } h2, .field-block { margin-bottom: 20px; } .containerr { max-width: 500px; margin: 15px auto; padding: 10px; border-radius: 1px; background-color: #ebebeb; box-shadow: 0 0 3px #666; font-size: 18px; }