- Adding a new line for every Div tag
- 8 Answers 8
- Как добавить линию к заголовку с помощью :before и :after
- Пример
- Lorem Ipsum
- HTML
- CSS
- I’m a coder. Welcome to my blog. Here are some of the records on my job.
- Home
- Categories
- CSS add line after div
- Related Articles
- Delete an image and add it after div with jquery / javascript
- Preprocessor / C ++ macro to automatically add lines after the function definition
- Css add styles to div with id, inside another div
- Add lines after a specific line (if it exists)
- No new line after div?
- How to add and delete div tags properly with jQuery?
- CSS — Add a blank line between the div elements
- How to delete a line break after DIV in CSS
- Add the caption div to the image after the expansion on the rollover with jQuery
- Is there a better way to add line breaks in a text block than simply put < Br & gt; After each item?
- How to add a blank line after each grep result using Perl?
- sed to search for a string and add a line after the search string
- How to add a single line after the match found with the sediment?
- How to Add Horizontal Lines Before and After a Text in HTML
- 1. Create an HTML text tag.
- 2. Adding the Left Line
- 3. Set the hr-lines to relative
- 4. Adding the Right Line
- Final Output:
- The Complete Code
- Wrapping Up
- Did you find this article valuable?
Adding a new line for every Div tag
I am building a navagation bar and i am making a seprate div tag for each link so I can specify their margin-left because it is a horizontal bar. Yet when I add the
8 Answers 8
In your style sheet (style.css for instance):
By default they are display: block;
Edited for Brian Rose so that it is in a style sheet and not inline as per my quick example.
I’m not sure encouraging using inline styles is a great thing. This belongs in a separate stylesheet file.
Will simply changing the ‘s to ‘s work?
Otherwise, add style=»float:left;» to the divs.
You should take note of the point in Jakub’s answer though that really your styles should be applied in a seperate stylesheet, and as skajfes is describing in his, understand the difference between block and inline elements.
Instead of using float: left you can always try display: inline-block . This should have the desired effect 🙂
The only reason to use inline block would be for spacing correct? I think it’s worth determining which styles he wants to use. If it’s color and text-decoration, inline-block is overkill IMO
Personally, I think it’s a better alternative to float , because float is displayed differently in some browsers sometimes. It also keeps the problems sometimes associated with float at bay.
So, div is a block element, by default a block element ocupies maximum width of the container. Span on the other hand is an inline element. Inline elements are stacked, well — inline. Inline elements can’t have margins, width or height defined, while block elements can. As always with css you have several options:
You can use float: left on the div’s to stack them horizontally. Remember to add another element at the end with clear:left defined so it displays properly accross browsers, and so that the parent container gets height displayed according to the menu items height.
Second option is to use display: inline-block which will make the div’s stack horizontally but will allow you to define margins, width and height. This however doesn’t work in IE6/7 so you’ll have to apply display: inline for those browsers. The easiest way is the hack *display: inline , which is ignored by everything except IE6/7.
- . You can remove the dots by applying list-style-type: none to li elements.
Как добавить линию к заголовку с помощью :before и :after
Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.
Пример
Lorem Ipsum
HTML
CSS
h3.title-example < font-size: 1em; /* Размер шрифта */ color: #5a5a5a; /* Цвет заголовка */ text-align: center; /* Текст по центру */ >/* CSS код для линии над заголовком */ h3.title-example:before < content: ''; display: block; height: 1px; /* Высота линии */ background: #f66d52; /* Цвет линии */ width: 150px; /* Ширина линии до наведения */ margin: 0 auto 10px; /* Отступ с боков по центру и снизу */ transition: 1s; /* Время, за которое линия возвращается после наведения */ >h3.title-example:hover:before < width: 250px; /* Ширина линии при наведении */ transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */ >/* CSS код для линии под заголовком */ h3.title-example:after < content: ''; display: block; height: 1px; /* Высота линии */ background: #f66d52; /* Цвет линии */ width: 150px; /* Ширина линии до наведения */ margin: 10px auto 0; /* Отступ с боков по центру и сверху */ transition: 1s; /* Время, за которое линия возвращается после наведения */ >h3.title-example:hover:after < width: 250px; /* Ширина линии при наведении */ transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */ > I’m a coder. Welcome to my blog. Here are some of the records on my job.
Home
Categories
CSS add line after div
What I am trying to do is add line after this box that is touching the right side of the box in the middle, how would I accomplish this?
You need to use ::after pseudo-element
Related Articles
Delete an image and add it after div with jquery / javascript
Firsly here’s the fiddle I have an image with class «Full», and there is a div with class «group-of-buttons», I want to remove this img and add it after the div «group-of-buttons» with js, here’s the HTML Code:
Preprocessor / C ++ macro to automatically add lines after the function definition
In C++ I want to make functions that when declared, gets automatically added to a map( or vector, doesn’t really matter in this case) as a function pointer and is called later automatically. For example this would be useful if I am writing unit test
Css add styles to div with id, inside another div
I have a div with id that needed to be access with css and change width and height. But its located inside of another div. How to add styles to that inner css. Please look at the code below
Add lines after a specific line (if it exists)
Right now I have this txtRTB.Text = txtRTB.Text & vbNewLine & «Text2» Is there a way that I can add this line before, say, «Text1» if that line exists inside txtRTB.Text? So for example, let’s say that right now txtRTB.Text say
No new line after div?
Is there a way to not have a newline inserted before a div without using float: left on the previous element? Maybe some tag on the div that will just put it to the right?There is no newline, just the div is a block element. You can make the div inli
How to add and delete div tags properly with jQuery?
I want to add/delete a div for every click action made on respective add/delete buttons. but for some reason, when I click on the buttons, nothing happens except that a hashtag is added to the URL and it takes me back to the top of the page. I’m not
CSS — Add a blank line between the div elements
This question already has an answer here: give space above and below a DIV 4 answers My sample UI looks like below: Here I need to add a blank lines after the textboxes. That means there will be a blank line after first textbox and another blank line
How to delete a line break after DIV in CSS
Is there a way to prevent a line break after a div with css, but to have one div min width and the other max width? For example I have
and want
Add the caption div to the image after the expansion on the rollover with jQuery
I’m using this jQuery to expand images on hover: http://jsfiddle.net/bAHXJ/ Now I’d like to add a div for a caption, using the title, something like this: $(«img»).hover(function() < $(this).each(function()< var title = this.title; $(this).after
Is there a better way to add line breaks in a text block than simply put < Br & gt; After each item?
I have a big list of items that are formatted like so: list item
list item
list item
list item
list item
list item
etc. Currently, I’ve got them to work by putting a br after every item, bu
How to add a blank line after each grep result using Perl?
How to add a blank line after every grep result? For example, grep -o «xyz» may give something like — file1:xyz file2:xyz file2:xyz2 file3:xyz I want the output to be like this — file1:xyz file2:xyz file2:xyz2 file3:xyz I would like to do someth
sed to search for a string and add a line after the search string
I have a file test, with the content Hi Hello I am good. My requirement is I have to write a shell script to search Hello sting in the file test and add a new line after it with the content got it. For this I am using command: sed ‘/Hello/ a «got it&
How to add a single line after the match found with the sediment?
I want to append ‘maildomain’ after the line port in a php file. I really want to use this solution as this seems the cleanest and very clear so I did sed -i «350,/port/a \’maildomain\'» file.php but it came out like this : 351 : ‘maildomain’ 35
How to Add Horizontal Lines Before and After a Text in HTML
This article will guide you on how to add a horizontal line to the right and left side of a text as shown below:
1. Create an HTML text tag.
In your HTML file create an h2 tag and give it a class name of hr-lines
2. Adding the Left Line
We’ll make use of the CSS :before pseudo-element to add a line to the left side of the text. Apply the code below to your CSS file:
.hr-lines:before< content:" "; display: block; height: 2px; width: 130px; position: absolute; top: 50%; left: 0; background: red; > From the above code, we’re creating a new element with a height of 2px and width of 130px before the hr-lines element using the content property, then giving it an absolute position in order to move it around, we set the top to 50% to make it align with the text at the middle.
3. Set the hr-lines to relative
For the pseudo-elements to be applied to the target element, we must set the position of the element to a relative, this will make all the movement of the :before and :after be relative to the parent (text).
Add the following lines to your CSS files.
We can fix this by setting the max-width and adding margin to the element.
.hr-lines< position: relative; /* new lines */ max-width: 500px; margin: 100px auto; text-align: center; > 
We’re setting the :before to the left side of the text by setting the left:0 .
4. Adding the Right Line
We’ll make use of the :after pseudo-element to add the right line.
Add the following lines of code to your CSS file to add the right line to the text.
.hr-lines:after< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; right: 0; > We’re setting the :after to the right side of the text by setting the right:0 .
Final Output:
The Complete Code
h2 class="hr-lines"> PEACE /h2> section> div> p>I wish for peace in Russia & Ukraine/p> /div> section> .hr-lines< position: relative; max-width: 500px; margin: 100px auto; text-align: center; > .hr-lines:before< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; left: 0; > .hr-lines:after< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; right: 0; > p< text-transform: uppercase; color: red; > section< display: flex; justify-content: center; align-items:center; gap: 1rem; > div< width: 500px; border: 1px solid #ccc; padding: 10px; height: 100px; display: flex; justify-content: center; align-items: center; line-height: 1.4; > Wrapping Up
I hope that this article will assist you in creating a text with horizontal right and left lines at some point in the future.
Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.
See you in the next article. Bye Bye 🙋♂️
If you found my content helpful and want to support my blog, you can also buy me a coffee below, my blog lives on coffee 🙏.
Did you find this article valuable?
Support Ayodele Samuel Adebayo by becoming a sponsor. Any amount is appreciated!