内联显示按钮和标签

Question

我想在不同行的同一个 line.But 多个按钮上显示按钮和标签。我该怎么做。帮助将不胜感激。按钮和标签应该并排放置，下一行的下一组按钮和标签。我哪里错了？

 <!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">

.round-button 
{
    width:20px;


}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;

    overflow:hidden;

    background: #4679BD; 
    box-shadow: 0 0 3px gray;

}
.round-button-circle:hover {
    background:#30588e;
}
.round-button a {

    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;

    text-align:center;
    color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}





    </style>
</head>
<body>


<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>

<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>

</body>
</html>

Answer 1

由于您的 html 代码中需要进行一些结构更改，因此与其对代码进行少量调整，不如考虑以适当的方式对其进行重构。你可以试试下面的代码。

.button {
  background: #4679BD;
  border-radius: 50%;
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.wrapper {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
a {
  float: left;
}

<div class="wrapper">
  <a class="button"></a><span>Button 1</span>
</div>
<div class="wrapper">
  <a class="button"></a><span>Button 2</span>
</div>

Answer 2

首先你不能用 span（内联元素）包裹 div（块元素）- 无效 HTML

问题是你没有让按钮 div round-button（块元素）内联或内联块或浮动也可以。

作为 label is inline element，您不需要将其显示给 inline。相反，您需要更改按钮 div 以充当内联按钮。

<div class="wrap">
   <div class='round-button' style="display:inline-block">
      <div class='round-button-circle'></div>
   </div> 
   <label style='display:inline;'>edit</label>
</div> <!--/ END OF WRAP -->

我用 inline-block 设置了 round-button div 的样式，因为它会内联显示并保持块元素 css 属性。

Answer 3

你可以尝试浮动：

.round-button {
    width: 20px;
    float: left;
    clear: left;
}

Answer 4

只需删除两者之间的 <br> <span> 并将下面添加到 css

span {
    display:inline-block;
}

喜欢即

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" />
<style>

span {
    display:inline-block;
}
.new_line {
    width:780px;
    margin:0 auto;
    height:50px;
    }

.new_line ul li {
    list-style-type:none;
    float:left;
    padding:10px 22px ;
    }

.new_line ul li img {
    float:left;}
</style>
</head>
 <!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">

.round-button 
{
    width:20px;


}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;

    overflow:hidden;

    background: #4679BD; 
    box-shadow: 0 0 3px gray;

}
.round-button-circle:hover {
    background:#30588e;
}
.round-button a {

    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;

    text-align:center;
    color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}





    </style>
</head>
<body>


<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>

<span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>

</body>
</html>

Answer 5

使用 display:table-cell 会给你预期的输出。

<span>
 <div class='round-button'><div class='round-button-circle'></div></div> 
 <label class="lblname" >edit</label>
</span>

<span >
  <div class='round-button'><div class='round-button-circle'></div></div> 
  <label class="lblname">edit</label>
</span>

CSS:

.round-button 
{
 width:20px;
 display: table-cell;
}

.lblname{
  display: table-cell;
  padding: 0 5px;
  vertical-align: middle;
}

Working Fiddle

注意： 尽量避免给出内联 css.

Answer 6

检查这个希望有帮助片段

.round-button 
{
width:60px;


}
.round-button-circle {
 background: #4679bd none repeat scroll 0 0;
border-radius: 50%;
box-shadow: 0 0 3px gray;
height: 20px;
overflow: hidden;
width: 20px;

}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {

width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;

text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}

<span >
<div class='round-button'>
  <label style="float: left; margin-right: 10px;">edit</label>
  <div class='round-button-circle'></div>
</div> 
</span>

<span >
  <div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
  </div> 
</span>

内联显示按钮和标签

displaying button and label inline

html

css

inline