个人中心
gpt4 book ai didi

html - 格式化html对象以使用css制作卡片

转载 作者：行者123 更新时间：2023-11-28 03:01:42 25 4
gpt4 key购买 nike

所以我正在做一个元素，我在 css/格式方面遇到了一些麻烦，因为我以前从未大量使用过 css。

下面是一段代码。在片段中，文本有点远低于图像。我需要它与图像具有相同的高度并且在行之间具有相同的行距(现在在粗体文本和常规文本之间有一个很大的空间)以及防止文本在图像下换行。

See this link for example of how I need the css to make this look.

我不确定具体该怎么做，如有任何帮助，我们将不胜感激。

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 12px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    
    #myUL {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    #myUL li a {
      /*border: 1px solid #ddd;*/
      /* This is not needed at this point */
      /*margin-top: -1px; */
      /* Prevent double borders: This is not needed at this point */
      background-color: #8a0707;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      color: black;
      display: block
    }
    
    #myUL li a:hover:not(.header) {
      background-color: #eee;
    }
    /*******************************************/
    
    li {
      width: 30%;
      min-height: 5em;
      padding: 1.5em;
      border: 1px solid #000;
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: top;
      margin: 5px;
      zoom: 1;
      *display: inline;
      _height: 250px;
    }
    /*******************************************/
    /*these attributes only work if the object is a div with the chip class*/
    /*.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
}
*/
    
    .chip img {
      float: left;
      /* Moves the chip image to a particular side */
      margin: -1.5em .5em 2em 0em;
      /*moves image down ,moves text next to image rightwards,moves image up, moves image right*/
      height: 50px;
      width: 50px;
      display: inline-block;
      border-radius: 50%;
    }
  </style>

  </style>
</head>

<body>

  <h2>My Phonebook</h2>

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

  <ul id="myUL">


    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>

    <li>
      <div class="chip" style="vertical-align:top;">
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
        <h4>froodle</h4>
        Moodle Get access to course materials and assignemnts and foster active learning, understanding and collaboration.
      </div>
    </li>




  </ul>

  <script>
    function myFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      ul = document.getElementById("myUL");
      li = ul.getElementsByTagName("li");

      for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("h4")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";

        }
      }
    }
  </script>

</body>

最佳答案

您的代码中没有与任何 HTML 元素相关联的 .chip 类，从你的样式表中删除 .chip，从这里删除它

.chip img {
  float: left;
  /* Moves the chip image to a particular side */
  margin: 0em .5em 2em 0em;
  /*moves image down ,moves text next to image rightwards,moves image up, moves image right*/
  height: 50px;
  width: 50px;
  display: inline-block;
  border-radius: 50%;
}

然后重新运行您的代码，它工作正常。这是 Codepen

关于html - 格式化html对象以使用css制作卡片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46163583/

25 4 0
文章推荐： javascript - 标签云 : Are there any in either flash or javascript
文章推荐： c++ - 对简单的 Arduino 类进行故障排除
文章推荐： javascript - 使用 javascript 通过浏览器身份验证下载 PDF
文章推荐： c++ - MFC 使一个类同时扩展 CView 和 CDockablePane
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com