CSS一行代码就可以解决第一个问题:

1.1 根据文字长度,自适应标签宽度

解决方法:把width的设置删掉,加一行代码 display:table;

.tag-footdetail{
  /*width: 300px;*/
  height: 40px;
  font-size: 1.5rem;
  line-height: 40px;
  text-align: center; 
  border-radius: 15px;
  border: 1px solid #D2B991;
  float: left;
  margin-right: 30px;
  margin-bottom: 10px;
  background-color: #D2B991;
  color: black;
  display:table;
}

1.2 根据文字长度,自适应标签高度

CSS中

height:auto;

display:inline-block;

2.Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick

解决方法:

1)注意引用juery是否有错 对应的<script>行代码请认真检查

2)这其实是个很简单的问题,主要是注意xxx是否是个字符串,要不要加引号。

以下为例,value.id和value.name 都是需要加' '的,加上之后可以解决这个问题。

function renderFootData(data) {
    $.each(data.result, function(index, value) {
    var html = '<div class="tag" style="font-size:28px;" onclick="getfootid(\''+value.id+'\',\''+value.name+'\');">'
    + value.name
    + '</div>';
    $("#foot-data-list").append($(html));
    });
}

[frontend] 根据文字长度 自适应宽度 自适应高度+ Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick的更多相关文章

  1. 基于jQuery自适应宽度跟高度可自定义焦点图

    基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cl ...

  2. 黄聪:table自适应宽度和高度

    自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自 ...

  3. UIWebView获得内容的高 高度自适应 宽度自适应

    UIWebView获得内容的高-作出自适应高的UIWebView- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *height ...

  4. 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)

    这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...

  5. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

  6. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. CSS学习笔记(6)--浮动,三列布局,高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  9. EasyUI设置Layout自适应浏览器宽度和高度

    //设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...

随机推荐

  1. 在imageView依次加入7个手势, 1.点击哪个button,往imageView上加入哪个手势.(保证视图上仅仅有一个手势). 2.轻拍:点击视图切换美女图片.(imageView上首先展示的美女

    // // ControlView.h // HomeworkGestureRecognizer // // Created by lanouhn on 14-8-27. // Copyright ( ...

  2. Zend_Form 创建、校验和解析表单的基础--(手冊)

    1.  创建表单对象 创建表单对象很easy:仅仅要实现 Zend_Form: <?php $form = newZend_Form; ? > 对于高级用例.须要创建 Zend_Form ...

  3. bzoj1087【SCOI2005】互不侵犯King

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 2405  Solved: 1413 [Submit ...

  4. java电影站点开发经验3

    上次讲到了.站点有资源了.可是必需要点缀下站点,要不光有资源比較空的.最開始就是想到了给资源加入评论功能的.然后自己就向开发个评论功能. 可是由于时间问题,并且本人也比較懒,就想在网上找找解决方式.嘻 ...

  5. ios单元測试之GHUnit

    1.相同创建一个測试的project, 2.通过cocoaPod来下载GHUnit框架,或者到github上下载.由于这个框架是开源的第三方框架. 同一时候加入QuartCore.framework( ...

  6. luogu2024 食物链

    题目大意 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B吃 C,C 吃 A.现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种,但是我们并 ...

  7. 君正Ingenic X1000E_halley2 更改Logo

    有两种方法可以改变开机logo,编译进内核或者修改u-boot. <一>.编译进内核 一. 制作LOGO图片(可以使用gimp) 1. 制作一个.ppm格式图片(logo_tvu_clut ...

  8. 应用程序 /dev/rtc 编程 获取时间 2011-12-13 01:01:06【转】

    本文转载自:http://blog.chinaunix.net/uid-16785183-id-3040310.html 分类: 原文地址:应用程序 /dev/rtc 编程 获取时间 作者:yuwei ...

  9. mysql数据库操作(3)

    1.在查询结果中不显示重复记录 查询时不显示重复记录主要应用了 DISTINCT 关键字,该关键字用于删除重复记录. 在实现查询操作时,如果查询的选择列表中包含一个表的主键,那么每个查询中的记录都将是 ...

  10. B5090 组题 二分答案

    bzoj有毒,看不了自己哪错了...根本没法debug. 我到现在还是不知道自己代码为什么会T,二分次数也加限制了,但是还是T...救命啊!!! 题干: Description 著名出题人小Q的备忘录 ...