Question

我正在尝试学习css和html来做某事，但是没有用。

我正在尝试做这样的事情：

但这就是我得到的：

我的代码：

#agenda1 { width: 350px; height: 50px; background-color: white; } #agenda2{ height: 23px; background-color: #bf1a17; border-radius: 10px; margin-top: 10px; width: 60; } #textoagenda{ text-align: center; }

<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>

Answer 1

只需将数字包装在一个元素中并将其设为inline-block，以便它与文字内联显示，但您可以应用垂直填充，border-radius用于圆角，padding为您看到合适，background-color和vertical-align所以它会与旁边的文字正确对齐。

span {
  background: #c00011;
  border-radius: .75em;
  padding: .25em .5em;
  vertical-align: baseline;
  display: inline-block;
}

<span>26/25</span> TESTTESTASDFASDF

Answer 2

在主要div中添加保证金属性。

＆＃13;

#agenda1 { width: 350px; 
height: 50px; 
background-color: white;
margin:auto; }

 #agenda2{ height: 23px; 
background-color: #bf1a17; 
border-radius: 10px; 
margin-top: 10px; 
width: 60; } 

#textoagenda{
 text-align: center; }

＆＃13;

<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>

＆＃13;

Answer 3

在这里，试试这个

<html>
<head>
<style>
#box1{
    position:relative;
    float:left;
    width: 100px;
    height: 100px;
    background-color: green;
}

#box2{
    position:relative;
    float:left;
    width: 100px;
    height: 100px;
    background-color: blue;
}
</style>
</head>
<body>
<div id="box1">contents</div>
<div id="box2">contenst</div>
</body>
</html>

框内的框/ CSS + DIV

3 个答案: