How to place buttons in the same line, center, and not too close to each other?

debugcn 에 게시 Dev

user4287698

I have 2 buttons :

Download
Edit

I want to place both of them in same line, side by side, but not too far away from each other either.

As of right now this what I have

enter image description here

I try to give them class pull-left and pull-right This what they come out to be

enter image description here

They're too far away. :(

I want them to look something like this. Possible, with the vertical line in the middle. I am not sure how to do that.

enter image description here

Here is my HTML Code

<p>
    <span>
        <a class="btn-1" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
            Download
        </a>
    </span>
</p>
<p>
    <span>
        <a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
            Edit
        </a>
    </span>
</p>

What should I do to get close to what I want ?

iori

You had 2 <p> tags, combine them into 1.
Place them in the same <p> tag so that they will be in same line as you wanted.
Add style="text-align:center;" into your <p> tag.
Add a bunch of   between them to maintain the spaces
For your vertical pipeline, just do this  |

Try this

<p style="text-align:center;">
    <span>
        <a class="btn-1 pull" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
            Download
        </a>
    </span>
    &nbsp;&nbsp;&nbsp;
    <span>
        <a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
            Edit
        </a>
    </span>
</p>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

How to place buttons in the same line, center, and not too close to each other?

How to place buttons in the same line, center, and not too close to each other?

Labels on the same line, not under each other

How to place list items that are overlapping next to each other?

How to place 3 boxes nex to each other with some text inside it?

How to place 2 spans beside each other with full width with CSS

Pandas - bucketing events close to each other

How to auto align the buttons to fit in center of the screen

Sort words on each line, editing the file in-place

How to place image on part of other image

django - urls.py how to differ almost same urls from each other

Replace every other occurence on the same line

Runinng command on each line and export in the same way

Number of same line in each text file

center subview according to other subview when both have the same superview

How to close Chrome window from the other application?

How Do I remove minimize, maximize, and close buttons in Ubuntu 18.04?

Running multiple command line after each other linux python

How close other element when clicked using .slideToggle

How to keep a drawn rectangle in the same place as the camera moves around

How to check a condition after each line of a function?

How to skip first element in each line of matrix?

How to append number at the beginning of each line [PHP]?

How to count the number of a specific character in each line?

How to center list menu item without text adding an extra line

I just moved the close/minimize/maxmize buttons to the right, how can I undo the action?

I just moved the close/minimize/maxmize buttons to the right, how can I undo the action?

How to print new data on the same line?

How to force button and select on the same line?

Two buttons into same form

How to print out to the same line, overriding previous line?