Table of Contents
回复讨论(解决方案)
Home Web Front-end HTML Tutorial css布局_html/css_WEB-ITnose

css布局_html/css_WEB-ITnose

Jun 21, 2016 am 09:47 AM
css layout



这个 我想让他们 在同一水平上 这个CSS代码怎么写
div.shopname { height:110px; width:1090; text-align:left; margin:20px;}//这个是那三个所在的DIV框#titlephoto { height:100px;}//淘宝网图片的CSS #searchbox{ border:3px solid #FF3300; height:40px; position:relative; width:500px; margin-bottom:40px;} //input按钮的css #searchimgbtn{} //搜索按钮图片的 CSS
Copy after login

回复讨论(解决方案)

你的问题都看不懂,描述清楚点啊

3个div都定义好width,然后全部float:left; 就好了把

不过我建议还是不要用div,用span{display:inline-block;}

垂直居中就用padding-top微调吧

3个div都定义好width,然后全部float:left; 就好了把

不过我建议还是不要用div,用span{display:inline-block;}

垂直居中就用padding-top微调吧

楼上正解,这就是定位的问题,img是行内标签,input是块级标签,所以直接放在一起他们就不在同一行上,float可以让它浮起,脱离文本流。
不知楼主需不需要考虑浏览器的兼容问题,需要的话就需要再进一步调试了

3个div都定义好width,然后全部float:left; 就好了把

不过我建议还是不要用div,用span{display:inline-block;}

垂直居中就用padding-top微调吧

span 内可以嵌套input吗?

span和div差不多,
只不过div默认是块状元素,display:block;
span是行内元素,默认display:inline;

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Questions frequently asked by front-end interviewers Questions frequently asked by front-end interviewers Mar 19, 2024 pm 02:24 PM

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

Methods and techniques on how to implement waterfall flow layout through pure CSS Methods and techniques on how to implement waterfall flow layout through pure CSS Oct 20, 2023 pm 06:01 PM

Methods and techniques on how to implement waterfall flow layout through pure CSS. Waterfall layout (Waterfall Layout) is a common layout method in web design. It arranges content in multiple columns with inconsistent heights to form an image. Waterfall-like visual effects. This layout is often used in situations where a large amount of content needs to be displayed, such as picture display and product display, and has a good user experience. There are many ways to implement a waterfall layout, and it can be done using JavaScript or CSS.

The evolution and application of CSS layout units: from pixels to relative units based on the font size of the root element The evolution and application of CSS layout units: from pixels to relative units based on the font size of the root element Jan 05, 2024 pm 05:41 PM

From px to rem: The evolution and application of CSS layout units Introduction: In front-end development, we often need to use CSS to implement page layout. Over the past few years, CSS layout units have evolved and developed. Initially we used pixels (px) as the unit to set the size and position of elements. However, with the rise of responsive design and the popularity of mobile devices, pixel units have gradually exposed some problems. In order to solve these problems, the new unit rem came into being and was gradually widely used in CSS layout. one

CSS Layout Tips: Best Practices for Implementing Circular Grid Icon Layout CSS Layout Tips: Best Practices for Implementing Circular Grid Icon Layout Oct 20, 2023 am 10:46 AM

CSS Layout Tips: Best Practices for Implementing Circular Grid Icon Layout Grid layout is a common and powerful layout technique in modern web design. The circular grid icon layout is a more unique and interesting design choice. This article will introduce some best practices and specific code examples to help you implement a circular grid icon layout. HTML structure First, we need to set up a container element and place the icon in this container. We can use an unordered list (<ul>) as a container, and the list items (<l

CSS Positions layout method to implement responsive image layout CSS Positions layout method to implement responsive image layout Sep 26, 2023 pm 01:37 PM

CSSPositions layout method to implement responsive image layout In modern web development, responsive design has become an essential skill. In responsive design, image layout is one of the important considerations. This article will introduce how to use CSSPositions layout to implement responsive image layout and provide specific code examples. CSSPositions is a layout method of CSS that allows us to position elements arbitrarily in the web page as needed. In responsive image layout,

CSS Layout Tutorial: The Best Way to Implement Holy Grail Layout CSS Layout Tutorial: The Best Way to Implement Holy Grail Layout Oct 19, 2023 am 10:19 AM

CSS Layout Tutorial: The Best Way to Implement Holy Grail Layout, with Code Examples Introduction: In web development, layout is a very important part. A good layout can make a web page more readable and accessible. Among them, the Holy Grail layout is a very classic layout method. It can center the content and maintain an elegant display effect while achieving adaptability. This article will introduce how to use the best method to implement the Holy Grail layout and give specific code examples. 1. What is the Holy Grail layout? The Holy Grail layout is a common three-column layout.

Front-end SEO—detailed explanation Front-end SEO—detailed explanation Mar 12, 2024 pm 06:13 PM

1. Working principle of search engine When we enter keywords in the input box and click search or query, we then get the results. Digging into the story behind it, search engines do a lot of things. Search engine websites, such as Baidu, have a very large database in the background, which stores a large number of keywords, and each keyword corresponds to many URLs. These URLs are extracted one by one from the vast Internet by the Baidu program. Collected by clicking downloads, these programs are called "search engine spiders" or "web crawlers". These hard-working "spiders" crawl on the Internet every day, from one link to another, download the content, analyze and refine it, and find the keywords. If the "spider" thinks that the keyword is not in the database and is not useful to the user, Useful

CSS layout tutorial: The best way to implement a two-column responsive layout CSS layout tutorial: The best way to implement a two-column responsive layout Oct 18, 2023 am 11:04 AM

CSS Layout Tutorial: The Best Way to Implement Two-Column Responsive Layout Introduction: In web design, responsive layout is a very important technology that allows web pages to automatically adjust their layout according to the screen size and resolution of the user's device, providing Better user experience. In this tutorial, we'll show you how to use CSS to implement a simple two-column responsive layout, and provide specific code examples. 1. HTML structure: First, we need to create a basic HTML structure, as shown below: <!DOCTYPEht

See all articles