How can I make the header just display in one line?-CodePudding

I need to make the name etc. displaying in one line. I tried out display: inline; on the "header" but it didn't work. (im newbie)

body {
  background-color: snow;
  box-sizing: border-box;
}

header {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.611rem;
}

header .circle {
  display: inline-block;
  height: 1.79rem;
  width: 1.79rem;
  border-radius: 50%;
}

header .circle__red {
  background: #ff605C;
}

header .circle__yellow {
  background: #FFBD44;
}

header .circle__green {
  background: #00CA4E;
}

<body>
  <header>
    <div ></div>
    <div ></div>
    <div ></div>

    <div >
      <h3 >Muhammed Ali Yuruk</h3>
    </div>
  </header>
</body>

Code: https://codepen.io/saruhankaya_/pen/rNpGMxK

CodePudding user response：

You want display: inline; or display: inline-block; on the children of header not header. The selectors header>* or .circle, .name should work.

body {
  background-color: snow;
  box-sizing: border-box;
}

header {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.611rem;
}

header .circle {
  display: inline-block;
  height: 1.79rem;
  width: 1.79rem;
  border-radius: 50%;
}

header .circle__red {
  background: #ff605C;
}

header .circle__yellow {
  background: #FFBD44;
}

header .circle__green {
  background: #00CA4E;
}

header>* {
  display: inline-block;
}

<header>
  <div ></div>
  <div ></div>
  <div ></div>

  <div >
    <h3 >Muhammed Ali Yuruk</h3>
  </div>
</header>

CodePudding user response：

Debatable if you need the <h3 since you force the font size so I made it a div
You can use flex display and set this to display in a row with flex-direction.
How you align or space out can be set several ways, here I used the column gap but margins some such or a space-between to get them scattered on the row evenly.
I removed some of the CSS since it was not the best way for the circles perhaps and really gives the same thing this way.
You did not specify how it should handle small/narrow screens so I let it wrap (line long text etc. might be in play here)

body {
  background-color: snow;
  box-sizing: border-box;
}

header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: 0.25em;
}

header {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.611rem;
}

header .circle {
  height: 1.79rem;
  width: 1.79rem;
  border-radius: 50%;
}

header .circle__red {
  background: #ff605C;
}

header .circle__yellow {
  background: #FFBD44;
}

header .circle__green {
  background: #00CA4E;
}

<body>
  <header>
    <div ></div>
    <div ></div>
    <div ></div>
    <div >
      <div >Muhammed Ali Yuruk</div>
    </div>
  </header>
</body>

CodePudding user response：

Using flexbox as suggested buy several other is probably the best way to go

Buuuuut

The quickest / easiest method:

.name { display: inline-block; }

Additional you will need to remove the margin off the heading tag or it wont appear to be inline.

.name-alt { margin: 0; }

CodePudding user response：

I didn't look too long at this but using flex-box it would look like this.

header {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.611rem;
  display: flex;
  align-items: center;
}

You need to apply the display attribute to the parent container - in this case the header since it contains the h3 and the div icons.

Then align-items will center it on the opposite axis, the y-axis in this case since the default direction is on the x-axis (flex-direction: row).

CodePudding user response：

I agree that display: flex; would be a simple solution. Using flex-wrap: nowrap; will prevent content from shifting to the next line.

header {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.611rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}