List within the Section

Asked

Viewed 44 times

0

I have a section limited in size and I have some "radio" options inside it. I want those options to stay within Ction. When it gets big, I want a scroll bar inside section to view all options.

#racetype{
display: flex;
flex-direction: column;
background-color: D3D3D3;
max-width: 120px;
max-height: 480px;
margin: 0px;
padding: 0px;
float: left;
}
<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Builder</title>
        <link rel="stylesheet" type="text/css" href="css/layout.css">
        <script type="text/javascript" src="JS/racetype.js"></script>
    </head>
    <body>
        <section id="racetype">
            <p><input type="radio" name="race" onclick="raceimg('aasimartree');racebonus(0)"> Aasimar </p>
            <p><input type="radio" name="race" onclick="raceimg('dragonborntree');racebonus(1)"> Dragonborn </p>
            <p><input type="radio" name="race" onclick="raceimg('drowelftree');racebonus(2)"> Drow </p>
            <p><input type="radio" name="race" onclick="raceimg('dwarftree');racebonus(3)"> Dwarf </p>
            <p><input type="radio" name="race" onclick="raceimg('elftree');racebonus(4)"> Elf, Khorvaire </p>
            <p><input type="radio" name="race" onclick="raceimg('woodelftree');racebonus(5)"> Elf, Wood </p>
        </section>
    </body>
</html>

html5 css3

  • And where’s your list <ul> and <li>?

  • I’m sorry, I corrected the text there, it’s a "radio" relationship actually

1 answer

1


Good afternoon, just use the property overflow: auto that upon reaching the maximum size of the Section it creates a scroll bar.

#racetype{
display: flex;
flex-direction: column;
background-color: D3D3D3;
max-width: 120px;
max-height: 480px;
margin: 0px;
padding: 0px;
float: left;
height: 200px;
overflow: auto;
}
<html><!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Builder</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<script type="text/javascript" src="JS/racetype.js"></script>
</head>
<body>
<section id="racetype">
	<p><input type="radio" name="race" onclick="raceimg('aasimartree');racebonus(0)"> Aasimar </p>
	<p><input type="radio" name="race" onclick="raceimg('dragonborntree');racebonus(1)"> Dragonborn </p>
	<p><input type="radio" name="race" onclick="raceimg('drowelftree');racebonus(2)"> Drow </p>
	<p><input type="radio" name="race" onclick="raceimg('dwarftree');racebonus(3)"> Dwarf </p>
	<p><input type="radio" name="race" onclick="raceimg('elftree');racebonus(4)"> Elf, Khorvaire </p>
	<p><input type="radio" name="race" onclick="raceimg('woodelftree');racebonus(5)"> Elf, Wood </p>
</section>
</body>
</html>

  • Thanks! It worked out!

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.