How to I surround a word in a different colored box?

How to I surround a word in a different colored box?
0.0 0

#1

Hi I am trying to write the word “SCAN” with a green box around it, can you please help me? Here is what I have done so far:
But as you see the box stretches until the end of the screen…


My css:

Blockquote

.scan {
  color: #000000;
  padding: 5px 0 5px 0;
  background-color:#B2EB07;
  text-align: left;
}

My HTML:

Blockquote

<html>
<head>
  <link rel="stylesheet" href="style.css">
  <cript src="Java.js"></script>  
</head>
<body class="myImage">
  <ul class="nav">
    <li class="text"><u>Frog memes</u></li>
    <li class="text"><u>Donald trump memes</u></li> 
  </ul> 
<ul class="scan">
  <p1><b>SCAN</b></p1>
  </ul>
<p id="demo"</p>
   <script>
    document.getElementById("demo").innerHTML = txt;
   </script>

#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

Thanks for clearing that up :smile:


#4

That’s occuring because <ul> (the element that you applied the scan class to) is considered to be a block-level element, and block-level elements span the entire width of the viewport by default.

So one way to achieved your desired effect is to change it to an inline-block (or inline) element instead, so that it doesn’t span the width of the viewport. I’ll leave that as an exercise for you as to how to do that. :wink:

This might help you in understanding inline vs block: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements


#6

Thank you astv99 I will try when I get home :slight_smile:


#7

-Thank you :slight_smile:


#8

@ols500 You should mark @astv99 's post as the solution if that’s what helped you. :wink: