Div and h3 on same line css

Ionic Framework ionic-v3
1

Hello i wanted to put a div and a h3 on the same line, i’m trying everything since yesterday but I don’t find any solution.

54

I want my words “Adaptée” and “Cohérente” next to they green square

Here is my HTML :

<div class="test"><div class="foo"></div><h3 class="title">Adaptée</h3></div>
<div class="foo"></div><h3 class="title"> Cohérente</h3>

And my CSS :

.title{
        display: inline;
    }
    .test{
        width: 100%;
    }

    .foo {
        width: 10px;
        height: 10px;
        margin-top: 3px;
        margin-right: 3px;
        background: #8abb2a;
        border-radius: 3px 0px 3px 0px;
    }
2

Hello,
div and h3 are block elements and takes the complete width.

Fortunatly you can unblock this elements or use flexbox to do that for you.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Best regards, anna-liebt

1 Like
3

Display the foo class as an inline-block:

.foo {
  display: inline-block;
  
  width: 10px;
  height: 10px;
  margin-top: 3px;
  margin-right: 3px;
  background: #8abb2a;
  border-radius: 3px 0px 3px 0px;
}

Here is a site that might help to understand layout: http://learnlayout.com/toc.html

1 Like
4

@anna_liebt Hello,

Thank you again for you help. I learned new things in CSS !

@brandyshea Omg ! I tried a lot of things and this too I think, but I understand nothing about block, inline, etc. It works thank you and thanks for the link, i’m lost with this !

1 Like