Question

我正在建立一个响应迅速的网站。在底部，我一行有一个电话图标，一个电话号码，一个邮件图标和一个邮件地址。

<img src="https://cdn.pixabay.com/photo/2013/07/13/10/30/icon-157358_960_720.png" height="150px" width="111px">
<a href="tel:123456">123456</a>
<img src="https://cdn.pixabay.com/photo/2016/06/13/17/30/mail-1454734_960_720.png" height="150px" width="150px">
<a href="mailto:asdf@gmail.com">asdf@gmail.com</a>

在整个窗口中，它看起来像这样：
[电话img] [电话号码] [邮件img] [邮件地址]

当我调整窗口大小时，它们最终会像这样：
[电话img] [电话号码] [邮件img]
[邮件地址]

我希望图标和文本粘贴在一起，如下所示：
[电话img] [电话号码]
[邮件img] [邮件地址]

我尝试用div和span包围它们，但没有一个起作用。我还用谷歌搜索“ html两个元素粘在一起”，没有结果。

感觉很基本，我也很愚蠢，但是我无法弄清楚。

Answer 1

如何？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<a data-toggle="modal" data-target=".Edit-modal" class="Edit disciplinaryActionReview" style="cursor:pointer;cursor:hand;">
  <span class="fa fa-pencil-square-o"> Click Here!
</span></a>

<div class="modal Edit-modal" id="myModel">
  <div class="modal-dialog" style="width: 90vw">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit Items Information</h4>
      </div>
      <div class="modal-body">
        <div class="row">

          <div class="col-md-3">
            <div class="form-group">
              <input type="hidden" id="EditHiddenID">
              <label for="EditIdentification">Title</label>
              <input type="text" class="form-control" name="Edittitle" id="Edittitle">
            </div>
          </div>

        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default mright" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success" id="saveChanges">Save changes</button>
      </div>

    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->

使用CSS添加填充和响应行为

Answer 2

您可以做的是使这两个元素成为无序列表的一部分，并在移动设备上将其显示为两个单独的块。当视口增大（@media screen and (min-width: 600px)）时，由于<li>，列表元素（display: inline-block;）将彼此相邻显示。

  ul {
  list-style: none;
}

@media screen and (min-width: 600px) {
  li {
    display: inline-block;
    padding: 0 10px;
  }

<ul>
  <li><img src="phone.jpg">
    <a href="tel:123456">123456</a></li>
  <li><img src="mail.jpg">
    <a href="mailto:asdf@gmail.com">asdf@gmail.com</a></li>
</ul>

将图像和链接视为一个元素

2 个答案: