JS & CSS: 同句行单个词的字体颜色和粗细

Question

I have the following problem:

I want to change the color and thickness of a single word (->(Admin)) in the same sentence line. My code does do what it should, but unfortunately it is totally unformated now and does have line skips. I used JavaScript and CSS, but I am a totally beginner in this field. Probably there is much redundancy in the code.

I used "span", h1 -> child (1)/(2) and so on in the.js file and corresponding entries in the.css file:

.js Datei:

<div id="user-info">
      <div><h1><span>{this.props.dataHandler["userData"]["firstname"]} {this.props.dataHandler["userData"]["lastname"]}</span><span> (Admin)</span></h1></div>
      <div><h2><span>Mitarbeiternummer: {this.props.dataHandler["userData"]["userID"]}</span></h2></div>
      <div><a href="/#"onClick={this.logout.bind(this)}><u>Logout</u></a></div>
      </div>

.css Datei:

#user-info {
    color: white;
    width: 15%;
    margin: 0.3vh 0 0 0;
  }

#user-info h1 :nth-child(1) {
    color: white; 
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0 0 0 0; 
     
  }
    
#user-info h1 :nth-child(2) {
    color: red;
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0.3vh 0 0 0; 
  }

#user-info h2 {
    color: white;
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0.3vh 0 0 0; 
  }

#user-info div{
    font-size: 1.5vh;
  }

Answer 1

It's happening because all of your elements are set to just 15% of width.

You can see how narrow #user-info is.

So, your solution is to remove width: 15% from #user-info .

 body { background: black; } #user-info { color: white; margin: 0.3vh 0 0 0; } #user-info h1:nth-child(1) { color: white; font-size: 1.5vh; font-weight: normal; width: 15%; margin: 0 0 0 0; } #user-info h1:nth-child(2) { color: red; font-size: 1.5vh; font-weight: normal; width: 15%; margin: 0.3vh 0 0 0; } #user-info h2 { color: white; font-size: 1.5vh; font-weight: normal; width: 15%; margin: 0.3vh 0 0 0; } #user-info div{ font-size: 1.5vh; }

 <div id="user-info"> <div><h1><span>{this.props.dataHandler["userData"]["firstname"]} {this.props.dataHandler["userData"]["lastname"]}</span><span> (Admin)</span></h1></div> <div><h2><span>Mitarbeiternummer: {this.props.dataHandler["userData"]["userID"]}</span></h2></div> <div><a href="/#"onClick={this.logout.bind(this)}><u>Logout</u></a></div> </div>

Answer 2

The most important rule is always to keep it simple, I think this should help you:

 body { font-size: 12px; } h1 { color: orange; } h1 span { font-weight: 600; color: red; } h2 span { color: lightblue; }

 <div id="user-info" class="user-info"> <h1>{this.props.dataHandler["userData"]["firstname"]} {this.props.dataHandler["userData"]["lastname"]}<span> (Admin)</span></h1> <h2>Mitarbeiternummer: <span>{this.props.dataHandler["userData"]["userID"]}</span></h2> <a href="/#" onClick={this.logout.bind(this)}>Logout</a> </div>