Question

我正在尝试将span与文字＆＃34;我的名字＆＃34;站在圆形div旁边。两者的display属性都设置为inline-block，但仍然卡住了。代码为in this link。

＆＃13;

.container {
  position: absolute;
  width: 382px;
  height: 529px;
  border: 1px solid black;
  background-color: #cccccc;
}
header {
  position: relative;
  width: 100%;
  height: 41px;
  color: white;
  background-color: #de4b4b;
  font-weight: bold;
  font-size: 14px;
  margin: auto;
}
header span {
  display: inline-block;
  padding-left: 172px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.sub-header {
  position: relative;
  width: 100%;
  height: 37px;
  background-color: white;
  font-size: 10px;
  margin: auto;
  color: black;
}
.sub-header span {
  display: inline-block;
  padding-top: 14px;
  padding-left: 10px;
}
.dialog-box1 {
  position: absolute;
  width: 365px;
  background-color: white;
  margin: 10px 8px 10px 8px;
  border: 1px solid #cccccc;
}
.dialog-box1-circle {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 30px;
  background-color: #cccccc;
  margin: 15px 10px 17px 15px;
}
.dialog-box-name {
  display: inline-block;
  color: #6495ED;
  font-size: 12px;
  width: 100%;
}
.dialog-box-text {
  color: #cccccc;
  font-size: 10px;
  font-family: 'roboto_light';
  margin-left: 15px;
}

＆＃13;

<!doctype html>

<body>
  <div class="container">
    <header><span>Note</span>
    </header>
    <div class="sub-header"><span>Friday 25.7.13 </span>
    </div>
    <div class="dialog-box1">
      <div class="dialog-box1-circle"></div>
      <span class="dialog-box-name">My Name</span>
      <span class="dialog-box-text">Dont forget to bring the new calender for the meeting.</span>
    </div>
  </div>
</body>

＆＃13;

Answer 1

从span

删除css显示

并在圆圈上添加css vertical align：middle

Answer 2

从以下规则中删除display:inline-block。

.dialog-box-name{
    color:#6495ED;
    font-size:12px;
    width:100%;
    /* display:inline-block; */ // remove this rule
}

添加vertical-align css规则

.dialog-box1-circle{
    display:inline-block;
    position:relative;
    width:35px;
    height:35px;
    border-radius:30px;
    background-color:#cccccc;
    margin:15px 10px 17px 15px;
    vertical-align:middle; /* Add this */

}

Demo

Answer 3

好的，我是新来回答，但这是我的回答

删除

display：inline-block;

来自

.dialog-box-name

你的CSS中的

并添加

float：left;

到

.dialog-BOX1圆

所以你的CSS将是

.container{
position:absolute;
width:382px;
height:529px;
border:1px solid black;
background-color:#cccccc;
}
header{
position:relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;   
font-weight: bold;
font-size:14px;
margin:auto;


}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;

}
.sub-header{
position:relative;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
color:black;


}
.sub-header span{
display:inline-block;
padding-top:14px;
padding-left:10px;
}
.dialog-box1{
position:absolute;
width:365px;    
background-color:white;

margin: 10px 8px 10px 8px;
border:1px solid #cccccc;
}
.dialog-box1-circle{
display:inline-block;
position:relative;
width:35px;
height:35px;
border-radius:30px;
background-color:#cccccc;
margin:15px 10px 17px 15px;
float:left;

}
.dialog-box-name{
color:#6495ED;
font-size:12px;
width:100%;


}
.dialog-box-text{
color:#cccccc;
font-size:10px;
font-family:'roboto_light';
margin-left:15px;

}

用文字定位跨度＆＃34;我的名字＆＃34;旁边的圆形div

3 个答案:

Demo