如何设计布局如预期的布局

Question

我需要使用html和css创建此种布局。使用div标签此布局

我的代码。

class App extends Component { 
    render() { 
    return (
     <div className="AppTitle"> 
     <b>Score:</b> 
     <div> 
      <button type="button">Rock</button> 
      <button type="button">Paper</button> 
      <button type="button">Scissors</button> 
     </div> 
     </div> 
    ); 
    } 
} 

App.css

.AppTitle { 
    margin: 100px; 
} 

它看起来像这样

Answer 1

使用CSS样式。给边界和边界半径。你会得到你想要的。

.AppTitle{ 
 
padding:50px; 
 
} 
 

 
button{ 
 

 
padding:20px; 
 
border:1px solid blue; 
 
border-radius:10px; 
 
background-color: Transparent; 
 
}

<div class="AppTitle"> 
 
     <u><b>Score:</b></u> 
 
     <div> 
 
      <button type="button"> 
 
      Rock 
 
      </button> 
 
      <button type="button">Paper</button> 
 
      <button type="button">Scissors</button> 
 
     </div> 
 
     </div>

Answer 2

威廉姆斯，这个怎么样？

.mainContainer { 
 
    width: 500px; 
 
    height: 200px; 
 
    border: 2px solid black; 
 
    background-color: lightgray; 
 
} 
 

 
.top { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: lightgray; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 100%; 
 
} 
 

 
#score { 
 
    margin-top: 50px; 
 
    display: inline; 
 
} 
 

 
.third { 
 
    width: 30%; 
 
    height: 100px; 
 
    background-color: lightgray; 
 
    display: inline-block; 
 
} 
 

 
button { 
 
    padding: 20px; 
 
    border: 2px solid blue; 
 
    border-radius: 10px; 
 
    width: 100px; 
 
}

<div class="mainContainer"> 
 
    <div class="top"> 
 
    <span id="score"><b> Score: </b></span> 
 
    </div> 
 
    <center> 
 
    <div class="third"> 
 
     <button type="button"> Rock </button> 
 
    </div> 
 
    <div class="third"> 
 
     <button type="button"> Paper </button> 
 
    </div> 
 
    <div class="third"> 
 
     <button type="button"> Scissors </button> 
 
    </div> 
 
    </center> 
 
</div>