精华内容
下载资源
问答
  • 看看图片,当我将浏览器窗口调整为更小的尺寸时 - “标签”正在移到第二看起来很糟糕。我如何强迫他们留在一条线上? +2 你会在CSS问题上做的更好,创建一个jsFiddle,以便人们可以实时修补它。 – +0 我会尽力做...

    .htabs { /* horizontal tabs */

    display: table;

    }

    .htabs li { /* horizontal tab */

    position: relative;

    float: left;

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAMklEQVQIW2M8e3r/fw4OdgZk8OPHTwbGq5eP/QcxYJIwNlgCpBokAAIwBfglsBqFy3IAqdosZ0m+BQ8AAAAASUVORK5CYII=);

    border-left: 1px solid #e1dfd2;

    border-top: 1px solid #e1dfd2;

    border-right: 1px solid #e1dfd2;

    margin-right: 1px;

    display: table-row;

    }

    .htabs li a { /* horizontal tab link */

    position: relative;

    font-family: 'Open Sans', sans-serif;

    font-size: 10px;

    font-weight: normal;

    color: #444444 !important;

    text-shadow: -1px -1px rgba(229,227,215,1), 1px 1px rgba(229,227,215,1);

    z-index: 1;

    padding: 0 7px;

    line-height: 30px;

    }

    我试图做一个充分响应网站,现在我需要一些帮助。看看图片,当我将浏览器窗口调整为更小的尺寸时 - “标签”正在移到第二行看起来很糟糕。我如何强迫他们留在一条线上?

    +2

    你会在CSS问题上做的更好,创建一个jsFiddle,以便人们可以实时修补它。 –

    +0

    我会尽力做jsFiddle –

    展开全文
  • 主要为大家介绍了CSS实现让同一行文字和输入框对齐的方法,涉及css中vertical-align属性的使用技巧,需要的朋友可以参考下
  • 一:flex 大法 步骤 设置外部容器 display: flex;...https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout 示例 <style> /*1. 设置外部容器 display: flex;*/ ...

    一:flex 大法

    步骤

    1. 设置外部容器 display: flex;
    2. 设置内部容器 align-items: stretch;

    原理

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

    示例

    <style>
        /*1. 设置外部容器 display: flex;*/
        .container{
            display: flex;
        }
        .container > div:nth-child(1){
            background: pink;
        }
        .container > div:nth-child(2){
            background: yellow;
        }
        .container > div:nth-child(3){
            background: red;
        }
        /*2. 设置内部容器 align-items: stretch;*/
        .box{
            align-items: stretch;
            width: 100px;
            margin-left: 20px;
        }
    </style>
    <div class="container">
        <div class="box">
            <img src="https://via.placeholder.com/120x200" width="100px" alt="">
            <p>img1 120*200</p>
        </div>  
        <div class="box">
            <img src="https://via.placeholder.com/120x300" width="100px" alt="">
            <p>img2 120*300</p>
        </div>
        <div class="box">
            <img src="https://via.placeholder.com/120x150" width="100px" alt="">
            <p>img3 120*150</p>
        </div> 
    </div>
    <script>
        // 点击拓展高度的区域也可触发事件
        document.querySelectorAll('.box').forEach((d) => {
            d.onclick = function(e){
                alert(e.target.innerText);
            }   
        })
    </script>

    二:padding 补偿法

    网上搜了一下发现这种方法居然有这种这个高大上的名词。。

    步骤

    1. 设置外部容器超出隐藏:overflow: hidden;
    2. 设置内部容器一个很大的 padding-bottom 和负 margin-bottom:margin-bottom:-10000px; padding-bottom:10000px;

    原理

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom
    CSS 的 margin-bottom 属性用于设置元素的底部外边距,允许设置负数值。一个正数值将让它相对于正常流与邻近块更远,而负数值将使得更近。

    我的理解是用 padding-bottom 把外部容器撑开(外部容器设置了 overflow: hidden; 已经创建 BFC),然后负的 margin-bottom 并不会将元素实际高度改变,只会改变这个容器计算时的高度,这样外部容器的高度计算时就为最高内部容器高度了。

    示例

    <style>
        /*1. 设置外部容器overflow: hidden;*/
        .container{
            overflow: hidden;
        }
        .container > div:nth-child(1){
            background: pink;
        }
        .container > div:nth-child(2){
            background: yellow;
        }
        .container > div:nth-child(3){
            background: red;
        }
        /*2. 设置内部容器
            margin-bottom:-10000px;
            padding-bottom:10000px;
        */
        .box{
            margin-bottom:-10000px;
            padding-bottom:10000px;
            width: 100px;
            float: left;
            margin-left: 20px;
        }
    </style>
    <div class="container">
        <div class="box">
            <img src="https://via.placeholder.com/120x200" width="100px" alt="">
            <p>img1 120*200</p>
        </div>  
        <div class="box">
            <img src="https://via.placeholder.com/120x300" width="100px" alt="">
            <p>img2 120*300</p>
        </div>
        <div class="box">
            <img src="https://via.placeholder.com/120x150" width="100px" alt="">
            <p>img3 120*150</p>
        </div> 
    </div>
    <script>
        // 点击补偿的的区域也可触发事件
        document.querySelectorAll('.box').forEach((d) => {
            d.onclick = function(e){
                alert(e.target.innerText);
            }   
        })
    </script>

    三:table 布局

    相当于用 \<table>

    步骤

    1. 设置外部容器 display: table;
    2. 设置内部容器 display: table-cell;

    原理

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

    示例

    <style>
        /*1. 设置外部容器 display: table;*/
        .container{
            display: table;
        }
        .container > div:nth-child(1){
            background: pink;
        }
        .container > div:nth-child(2){
            background: yellow;
        }
        .container > div:nth-child(3){
            background: red;
        }
        /*2. 设置内部容器 display: table-cell;*/
        .box{
            display: table-cell;
            /*vertical-align: top; 默认是bottom*/
            width: 100px;
            /*margin-left: 20px; table布局下会失效*/
        }
    </style>
    <div class="container">
        <div class="box">
            <img src="https://via.placeholder.com/120x200" width="100px" alt="">
            <p>img1 120*200</p>
        </div>  
        <div class="box">
            <img src="https://via.placeholder.com/120x300" width="100px" alt="">
            <p>img2 120*300</p>
        </div>
        <div class="box">
            <img src="https://via.placeholder.com/120x150" width="100px" alt="">
            <p>img3 120*150</p>
        </div> 
    </div>
    <script>
        // 点击拓展高度的区域也可触发事件
        document.querySelectorAll('.box').forEach((d) => {
            d.onclick = function(e){
                alert(e.target.innerText);
            }   
        })
    </script>

    转载于:https://www.cnblogs.com/jffun-blog/p/9520290.html

    展开全文
  • 当创建一个新的asp.net...我想改变它,以便标签和字段都在同一上并对齐以下不行@using (Html.BeginForm()) {Account Information@Html.LabelFor(m => m.UserName)@Html.TextBoxFor(m => m.UserName)@Html.Va...

    当创建一个新的asp.net mvc3应用程序时,您将获得登录和注册表单,并在文本字段上方添加标签。

    我想改变它,以便标签和字段都在同一行上并对齐

    以下不行

    @using (Html.BeginForm()) {

    Account Information

    @Html.LabelFor(m => m.UserName)

    @Html.TextBoxFor(m => m.UserName)

    @Html.ValidationMessageFor(m => m.UserName)

    @Html.LabelFor(m => m.Password)

    @Html.PasswordFor(m => m.Password)

    @Html.ValidationMessageFor(m => m.Password)

    @Html.CheckBoxFor(m => m.RememberMe)

    @Html.LabelFor(m => m.RememberMe)

    CSS:

    .display-label,

    .editor-label

    {

    display:inline-block;

    width: 200px;

    text-align: right;

    margin-right: 10px;

    }

    .display-field,

    .editor-field

    {

    display:inline-block;

    margin: 0.5em 0 0 0;

    }

    展开全文
  • CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标。默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐。常见欢思中属餐显近和想都...

    CSS控制图片和文字在同一行显示且对齐的3种方法

    在 HTML 代码中,有时会需要在文字旁边加上一个图标。

    默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐。

    常见欢思中属餐显近和想都性厅示近和想都性厅示方法有3种:1、通过添加css的“vertical-align:middle;”;2、如果图片是背景图片,可以在css中设置背景图片;3、把文字和图片分别放入不同的div中。上面三种方法都可以让图片和文字在同一行显示,下面我们用实例来应器的功久含请业屏随气域实控近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现用一下。

    1、体朋几一级发等点确层数框的很屏果行4带域添加上“vertical-align:mid直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请dle”属性

    我们用“登新为次发人制通业个到也和一以设近打了基过陆”这个在实际情况做实例,把“登陆”做成图片,“找回密码”设置成文字其html代码如下分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后,护据一:

    Document

    b94cc2877dbd71f83099840660865a45.png

    2、把图片设置为背景图片

    如果我的候通现端数是制这。效合应近环大过这业据们的图片本身是一个背景图片的话,可以在css中使用“background”来设置该图片,html代在重说道。础过学开概码数项遍间里哦行览屏屏定处。。容标中钮控设近浏新术,都第来期发述更据目历也面我商器蔽蔽广绿最码如下:

    Document

    .haokan{

    width: 300px;

    height: 50px;

    line-height: 50px;

    background-color: red;

    background: url(logo.jpg) no-repeat left center;

    }

    .haokan a{

    display: block;

    margin-left: 116px;

    }

    3、分别把大享上。是发了概开程态间些告人屏果会区。图片和文字放入不同的div中,html代码如下微和二第说,班。都年很过过事发工开宗定据发指互数个遍前互就:

    Document

    .divs .imgs{

    display: inline-block;

    vertical-align: middle;

    }

    .divs .infos{

    display: inline-block;

    }

    本文来源于网络:查看 >https://blog.csdn.net/u010170411/article/details/84672259

    展开全文
  • css 图片文字同一行

    2017-12-15 14:14:00
    http://www.mahaixiang.cn/css/1149.html
  • css统一界面风格。私人文件。qwertyqwery
  • 当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么我们怎么才能在css中控制他们在同一行显示呢
  • 大佬们,像上图这种,加条什么语句可以达到第二个图的效果呢,div{display:inline;}的效果是1234abc在同一排,那像第二张图这种效果的能实现嘛 小白弄了一晚上没弄明白,感谢解答
  • 为什么按照这个代码来布局ul下的li跟.cartcontrol无法再一显示{{food.name}}{{food.count}}.cartcontrol.cart-decrease{float: left;display:inline-block;padding:6px;transition: all .4s linear;background-...
  • 本文实例讲述了CSS实现让同一行文字和输入框对齐的方法。分享给大家供大家参考。具体分析如下:大家都知道有时候一个文本输入框和一段文字在同一行上显示,然而它们总不是垂直居中,看上去不美观,这段CSS代码就是...
  • 我想展示几行数据,每行都有一个标题和同一行的一些数据.这个问题肯定已经在SO(即How to style dt and dd so they are on the same line?)上得到了回答,然而,它似乎对我没有用.以下似乎有效,除非DD没有修复它的内容....
  • nav 四列的第一列 四列的第二列 四列的第三列 四列的第四列 nav 这是五列的第一列 这是五列的第二列 这是五列的第三列 这是五列的第四列 这是五列的第五列 ...
  • 【html css】DIV+CSS如何让图片和文字在同一行 前端react项目要写一个图标放在标题后面。 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下。 目前使用3种方法实现,...
  • css高度-同一行的两个span有高度差

    千次阅读 2018-08-15 19:16:15
    我的代码是这样的 html: &lt;div class="box"&gt; &lt;span class="logo"&gt;&lt;span&...css: .box { width:100%; height: 60px; } .box .l
  • css是button和输入框保持在同一行

    万次阅读 2018-10-11 14:22:30
    ;float: right;">检索 ${courseName}" class="form-control" > display:inline-block;保持在同一
  • display: inline-block;可以让两个Html元素合到同一行,display: block;可以让两个在同一行的Html元素不在同一行
  • CSS控制图片和文字在同一行显示且对齐的3种方法.当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么我们怎么才能在css中控制他们在同一行显示呢,其实方法有3种...
  • css用浮动的方法让div在同一行

    千次阅读 2019-08-11 15:42:33
    如果在页面中输入了3个div 标签,因为div是块级元素,所以这3个div各占一,但是你为第一个div设置了float:right; 浮动是第一个div脱离就正常的文档流,所以第一个div的位置空间 也就空了出来,下面两个div...
  • 在界面设计的时候,经常需要...如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1"> /*外层div*/ <div id="id2" style="width:100px;height:20px;">第一个div</div> <d...
  • 层的样式左漂浮;就可以达到在同一行不换行的效果 div { float: left; } 转载于:https://www.cnblogs.com/zgaspnet/archive/2012/01/11/2318688.html...
  • 我想展示几行数据,每行都有一个标题和同一行的一些数据.这个问题肯定已经在SO(即How to style dt and dd so they are on the same line?)上得到了回答,然而,它似乎对我没有用.以下似乎有效,除非DD没有修复它的内容....
  • CSS—两个div放在同一行

    千次阅读 2019-08-01 15:08:10
    把两个div放到一个div中,然后给两个div的样式中加上style="float:left"即可

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 99,824
精华内容 39,929
关键字:

css同一行