PHP/CSS 帮助-将文本与 PHP 生成的内容对齐。

“我有这样的代码:<div class="tags">标签: <?php mje_list_tax_of_mjob( $mjob_post->ID, '', 'skill' ) ?></div> 然后我进行了一些CSS魔法:display: block ruby;我得到了这个结果:非常好...我在Chrome上检查,它与第一张图像一样!我在Google上查找,显然Chrome不支持display:ruby,我刚刚遇到了这个问题。我使用display:ruby把一行文字完全放在一行中。在Firefox中,这个代码可以完美运行,但在Chrome或Safari中则不行...”
 

fistherade1986

New member
“我尝试了这个:<div class="tags"><?php echo '标签:'.mje_list_tax_of_mjob( $mjob_post->ID, '', 'skill' ) ?></div>但是结果却是这样的:你看,现在它放在下面了 ... ”
 
我试过这个:<div class="tags"><?php echo "标签"; mje_list_tax_of_mjob( $mjob_post->ID, '', 'skill' ) ?></div>和上面的一样……
 

tranmexella1986

New member
我试过这个:<div class="tags"><?php echo "'输出'mje_list_tax_of_mjob( $mjob_post->ID, '', 'skill' ) ";?></div>然后得到了这个:至少现在在同一行上了。但是它是有问题的,不好……
 
好的,我修复了。Boom<div class="tags">标签:<?php mje_list_tax_of_mjob( $mjob_post->ID, '', 'skill' )?></div>Boom.mjob-single-page .list-require-skill-project.list-taxonomires.list-skill{display:inline-block;}Boom在Firefox、Chrome、Opera、Brave上检查过了,看起来都不错。完成!
 

stenlutido1984

New member
Bootstrap = jS HTML,Tailwind CSS = jS HTML CSS。当你从面向对象的角度尝试搞乱事情时,它意味着你不必在20个地方编辑一个东西……我无法真正回答它是否比Bootstrap更好,因为我是新手,但它确实非常适合学习谁在做什么。想象一下,在使用PHP / Laravel / React时采用MVC方法,并且在一个到四个易于理解的位置(index,main.css,main.js,tailwind.css)中拥有所有视图……它也使你的模型和控制器不那么混乱!inline = fun
 

mifeseroo1983

New member
我想知道他为什么没有在StackOverFlow上更活跃。如果他在SOF上活跃,他本可以帮助许多新手节省编写CSS的时间。
 
<div class="tags">标签:<?php mje_list_tax_of_mjob ( $mjob_post->ID, '', 'skill' )?></div>Boom.mjob-single-page .list-require-skill-project.list-taxonomires.list-skill {display: inline-block;}BoomView 附件221831 在 Firefox、Chrome、Opera、Brave 上核对过,看起来都很好。完成!该死的,只有在标签不超过一行的情况下才有效果。如果超过一行,我们就得到这种翔:Buuuuuuuuuuuuu!!!!!!!!!!!!
 

pofotesis1973

New member
好啦,我解决了,但是不是很美观。PHP <div class="tags"><p class="tags-custom">标签:</p> <?php mje_list_tax_of_mjob ( $mjob_post->ID, '', 'skill' )?> </div>CSS.single-mjob_post .tags-custom { margin-top: 24px; position: absolute;}更多CSS.mjob-single-page .list-require-skill-project.list-taxonomires.list-skill {margin-left: 40px;}因此我用“p”标签包裹了“标签”,然后将该“p”标签设置为绝对位置并移至下方,接着将“ul”标签移到右侧。我在 Firefox、Chrome、Brave、Opera 和手机上测试过,效果很好。这就是我所能做到的了。是的,我知道,你可能做得更好。如果你能做得更好,那就尽管试试吧。
 
我想要像这样的东西:我的创作也能达到相同的效果,只不过我使用了position:absolute,我知道这并不是推荐的做法。谁知道什么时候会有人使用一些奇怪的浏览器或设备访问那个页面,然后因为我做的事情而看到一些奇怪的重叠信息。但是如果真正了解这方面知识的人告诉我我所做的没问题,那么它就没问题,我会睡得更香。
 
使用 Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/,花5分钟的时间,您就可以了解所有类型响应式布局设计的终极解决方案。
 
顶部