使用CSS和Javascript制作标签

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用CSS和Javascript制作标签相关的知识，希望对你有一定的参考价值。

我试图使代码片段工作。我刚刚开始这个，我目前只为我的手机设计它。您可以通过单击项目和今天来查看问题。

我有一个div（#data-container），它由两个div（.project, .today）组成，我希望这两个div可以像标签一样并排。所以，当我点击它们各自的按钮时，它会滑动并显示相应的div。我有它工作，但有2个问题。

它们是如何工作的 - #data-container有white-space: nowrap（儿童divs不会包裹并且并排放置并且滑动将起作用）并且它的子div（.project and .today）被设置为width: 100%和inline-block。

这个问题

  1. data-container需要能够垂直滚动并且可以在当前选定的div周围包装文本，但white-space: nowrap使文本溢出。我试过word-wrap: break-word，它不起作用。我也可以通过设置display: hidden使其工作，但我希望div滑动。
  2. 我不明白为什么会出现这个问题。当我将#data-container设置为overflow-y: scroll时，它会使divs水平滚动，从而打破整个系统。

我需要一种方法来使data-container只能垂直滚动并包装文本。

玉

extends ./layout.jade

block content
    #maindiv
        .sidebar
            #profile
                img(src= ' #{image} ', width=40, height=40)
                span #{name}
            ul
                li Home
                li +Project
                li +Task
                li Reminders
                li Statistics
                li Settings
                li Help
                li
                    a(href='/logout') Log Out
        header
            span ☰
            h1 LifeHub
        .container
            .navbar
                .navbar-inside-one.below
                    h2 Projects
                .navbar-inside-two.above
                    h2 Today
            #data-container
                .project
                    p It's lonely here. You should add some projects.
                .today
                    input#task(type='text', placeholder='+ Add a New Task', autocomplete='off')

CSS

.container {
  position: relative; }

.below {
  z-index: 0;
  box-shadow: 0;
  background-color: white;
  color: black; }

.above {
  z-index: 1;
  box-shadow: 2px 2px 2px 1px #b0b0b0;
  background-color: #26A69A;
  color: white; }

#data-container {
  position: relative;
  height: 93%;
  overflow-y: scroll;
  white-space: nowrap;
  width: 100%;
  z-index: 0; }

.navbar {
  text-align: center;
  font-size: 26px;
  height: 7%;
  min-height: 50px; }

.navbar-inside-one, .navbar-inside-two {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  padding: 10px 10px 10px 10px; }

.project, .today {
  display: inline-block;
  position: relative;
  width: 100%;
  word-wrap: break-all;
  font-size: 28px;
  line-height: 1.63em; }

用javascript动画

    $('.navbar-inside-two').click(function() {
        $(".project, .today").animate({left: "-" + $("#data-container").width()}, 200);
        $(".navbar-inside-one").removeClass('below').addClass('above');
        $(this).removeClass('above').addClass('below');
    });

    $('.navbar-inside-one').click(function() {
        $(".project, .today").animate({left: "0"}, 200);
        $(".navbar-inside-two").removeClass('below').addClass('above');
        $(this).removeClass('above').addClass('below');
    });


$(document).ready(function() {

  //Height function for container and sidebar
  (function() {
    $(".container, .sidebar").height($("#maindiv").height() - $('header').height());
    $(".sidebar").css('top', 49); //TO BE MADE AGAIN
  })();

  $('span').click(function() {
    var sidebar = $('.sidebar').css('left').replace(/([a-z])w+/g, '');
    if (sidebar < 0) {
      $('.sidebar').animate({
        'left': '0px'
      }, 200);
      $('.container').animate({
        'left': '150px'
      }, 200)
    } else {
      $('.sidebar').animate({
        'left': '-150px'
      }, 200);
      $('.container').animate({
        'left': '0px'
      }, 200)
    }
  });

  $('.navbar-inside-two').click(function() {
    $(".project, .today").animate({
      left: "-" + $("#data-container").width()
    }, 200);
    $(".navbar-inside-one").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });

  $('.navbar-inside-one').click(function() {
    $(".project, .today").animate({
      left: "0"
    }, 200);
    $(".navbar-inside-two").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });
});
/* Messed up Css from multiple Sass files */

.font-head,
.navbar,
.sidebar {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  letter-spacing: 2.2px;
}
.font-para,
input[type='text'] {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 100;
  letter-spacing: 1.4px;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
header {
  width: 100%;
  background-color: #1a70c5;
  padding: 10px;
}
span {
  box-sizing: border-box;
  position: relative;
  font-size: 28px;
  color: #F8F8F8;
}
h1 {
  font-family: 'Poiret One', cursive;
  letter-spacing: 2.2px;
  margin-left: 10px;
  color: white;
  font-size: 28px;
  display: inline-block;
}
.container {
  position: relative;
}
.below {
  z-index: 0;
  box-shadow: 0;
  background-color: white;
  color: black;
}
.above {
  z-index: 1;
  box-shadow: 2px 2px 2px 1px #b0b0b0;
  background-color: #26A69A;
  color: white;
}
#data-container {
  position: relative;
  height: 93%;
  overflow-y: scroll;
  white-space: nowrap;
  width: 100%;
  z-index: 0;
}
.navbar {
  text-align: center;
  font-size: 26px;
  height: 7%;
  min-height: 50px;
}
.navbar-inside-one,
.navbar-inside-two {
  position: relative;
  display: inline-block;
  width: 46%;
  height: 100%;
  padding: 10px 10px 10px 10px;
}
.project,
.today {
  display: inline-block;
  position: relative;
  width: 100%;
  word-wrap: break-all;
  font-size: 24px;
  line-height: 1.63em;
  padding: 20px
}
input[type='text'] {
  position: static;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 16px;
  width: 100%;
  height: 30px;
  color: black;
}
input[type='text']:focus {
  outline: none;
  border: none;
}
::-webkit-input-placeholder {
  color: #D9D9D9;
}
::-webkit-scrollbar {
  display: none;
}
#maindiv {
  width: 400px;
  height: 550px;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-30%);
  transform: translateX(-50%) translateY(-30%);
  overflow: hidden;
}
.sidebar {
  position: fixed;
  left: -155px;
  height: 100%;
  bottom: 0px;
  width: 150px;
  background: #333;
}
.sidebar ul {
  padding: 0px 5px;
}
.sidebar li {
  color: #F7F7F7;
  font-weight: 100;
  font-size: 22px;
  text-align: center;
  margin-top: 30px;
}
.sidebar li:first-child {
  margin-top: 10px;
}
#profile {
  height: 50px;
  width: 98%;
  margin-top: 10px;
}
#profile img {
  vertical-align: middle;
  border: 1px solid #333;
  border-radius: 100%;
}
#profile span {
  display: inline-block;
  padding: 5px 0px 0px 10px;
  color: white;
  font-size: 18px;
}
@media (max-width: 450px) {
  #maindiv {
    width: 100%;
    height: 100%;
  }
}
<div id="maindiv">
  <div class="sidebar">
    <div id="profile">
      <img src="something.jpg" width="40" height="40" /><span>Derp</span>
    </div>
    <ul>
      <li>Home</li>
      <li>+Project</li>
      <li>+Task</li>
      <li>Reminders</li>
      <li>Statistics</li>
      <li>Settings</li>
      <li>Help</li>
      <li><a href="/logout">Log Out</a>
      </li>
    </ul>
  </div>
  <header><span>☰</span>
    <h1>Derp Title</h1>
  </header>
  <div class="container">
    <div class="navbar">
      <div class="navbar-inside-one below">
        <h2>Projects</h2>
      </div>
      <div class="navbar-inside-two above">
        <h2>Today</h2>
      </div>
    </div>
    <div id="data-container">
      <div class="project">
        <p>Stupid paragraph dosen't wrap when supposed to</p>
      </div>
      <div class="today">
        <input id="task" type="text" placeholder="+ Add a New Task" autocomplete="off" />
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
答案

我厌倦了等待，我想要一个解决方案。它不是我想要或完美的任何方式，但它给出了我想要的幻觉。

我做了.today到display: none，#data-container到overflow-y: auto和overflow-x: hidden然后改变了动画。

然后动画现在将当前div移动到某个位置，然后从该位置动画回来。

新动画

$('.navbar-inside-two').click(function() {
        if($(this).hasClass('above')) {
            $(".today").css({
                display: 'inline-block',
                left: $("#data-container").width()
            });
            $(".project").css('display', 'none');
            $(".project, .today").animate({left: '0px'}, 150);
            $(".navbar-inside-one").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

    $('.navbar-inside-one').click(function() {
        if($(this).hasClass('above')) {
            $(".project").css({
                display: 'inline-block',
                left: '-' + $("#data-container").width()
            });
            $(".today").css('display', 'none');
            $(".project").animate({left: "0"}, 150);
            $(".navbar-inside-two").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });
另一答案

试试这个：

#data-container {
    white-space: nowrap;
}
.project, .today {
    white-space: normal;
}

您还可以考虑使用#data-container {overflow-y: auto}删除丑陋的滚动条...仍应滚动。

你可以做的另一件事是给#data-container宽度为200％，其子宽度为50％，然后滑动#data-container。

另一答案

使用flex有一种简洁的方法。这是我的建议：

#data-container {
    display: flex;
}

.project, .today {
    display: flex;
    min-width: 100%;
    white-space: normal;
}

当任何div的内容超过高度时，您也会得到垂直滚动。

以上是关于使用CSS和Javascript制作标签的主要内容，如果未能解决你的问题，请参考以下文章

如何仅使用 CSS 制作标签？ [复制]

如何使用 CSS 和 JavaScript 制作可变主题

HTML5,CSS3 与 Javascript 制作视频播放器

markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发

html和css制作一个搜索框，要内容与搜索图标结合，该怎么做？

使用CSS和javascript制作带有不同样式的单词的段落的正确方法是什么