Question

我想创建此按钮“问题”：

但在实施中我不明白该怎么做，看起来很容易，但我不能这样做.. =（白痴）我做的代码：

body {
  background-color: black;
  }

.ag_question {
    float: left;
    margin-top: 20px;
}
span.block1 {
    background-color: #fb8f02;
    padding: 14px 12px;
    border: 1px solid #444;
}
.ag_question a {
    font-size: 15px;
    color: #fff;
    padding: 14px 12px;
    border: 1px solid #444;
    text-decoration: none;
}

<body>
    <div class="ag_question">
        <span class="block1">
            <img src="http://storage3.static.itmages.ru/i/16/0713/h_1468392215_2753574_1f123fce00.png" alt="">
        </span>
        <a href="#">Задать вопрос</a>
    </div>
</body>

我希望链接中的图标是....

Answer 1

在span标记中添加a标记。像这样：

＆＃13;

body {
  background-color: black;
  }

.ag_question {
    float: left;
    margin-top: 20px;
}
span.block1 {
    background-color: #fb8f02;
    padding: 14px 12px;
    border: 1px solid #444;
    margin-right:10px;
}
span.block1 img{
    vertical-align: middle;
}
 
.ag_question a {
    font-size: 15px;
    color: #fff;
    padding: 14px 12px 14px 0px;
    border: 1px solid #444;
    text-decoration: none;
}

＆＃13;

<body>
<div class="ag_question">
	<a href="#">
      <span class="block1">
        <img src="http://storage3.static.itmages.ru/i/16/0713/h_1468392215_2753574_1f123fce00.png" alt="">
      </span>
      Задать вопрос
   </a>
</div>
  </body>

＆＃13;

Answer 2

使用 Flexbox 。删除浮动并添加一些元素......像这样

＆＃13;

body {
  background-color: black;
  }

.ag_question {
    width:150px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    border: 1px solid #444;
}
span.block1 {
    background-color: #fb8f02;
}
span.block1 img {
    display: block;
    padding: 10px 8px;
}
.ag_question a {
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    margin-left:10px;
}

＆＃13;

<body>
    <div class="ag_question">
        <span class="block1">
            <img src="http://storage3.static.itmages.ru/i/16/0713/h_1468392215_2753574_1f123fce00.png" alt="">
        </span>
        <a href="#"><span>Задать вопрос</span></a>
    </div>
</body>

＆＃13;

Answer 3

我将所有元素浮动，display:table-cell使元素居中：

https://jsfiddle.net/L1ehfdeq/1/

“Ask”按钮的实现

3 个答案: